extjs/jquery/js 操作页面滚动条

首先,滚动条操作针对的对象是 element 对象。


假设要对一个 id 为 content 的 ext 对象实现滚动至底部的效果:

var content = Ext.getCmp("content");

var el = content .body;

var dom = content .body.dom;

var id = content .body.dom.id;


方法一:调用 jquery 的 scrollTop方法

$('#id').scrollTop( $('#id')[0].scrollHeight );


方法二:相当于 js 直接重置对象的 scrollTop  

dom .scrollTop = dom .scrollHeight - dom .offsetHeight;

关于 scrollHeight 、offsetHeight 具体可百度了解,下图简介一下:


图片转自:http://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight


方法三:调用 extjs 的 scrollTo 方法,该方法比方法二多一个动画效果!

var height = dom .scrollHeight - dom .offsetHeight;

el.scrollTo('top',height ,true);

具体API如图:


------------------------------------------- 2017/5/8 补充 -------------------------------------------

用 scrollTo 是从滚动条的顶部还是计算的 如果要从滚动条当前位置开始滚动一段距离的话 则需要用 scroll() 

var height = dom .scrollHeight - dom .offsetHeight;

el.scroll('bottom',height ,true);

注意:这时候的第一个参数不是起始位置的意思了,而是朝哪个方向滚动的意思。

具体可见下方API截图:



posted @ 2017-04-28 16:49  Mr.Kay  阅读(318)  评论(0编辑  收藏  举报