jQuery里的滑动加载 scroll事件 scrollHeight scrollTop属性的获取 |
您所在的位置:网站首页 › jqueryscrollTop › jQuery里的滑动加载 scroll事件 scrollHeight scrollTop属性的获取 |
滑动加载的前提是根据页面滚动事件来分页加载数据,即通过 scroll事件来触发滚动事件。 $(window).scroll(function(){});如果是其他DOM元素触发的话,必须保证该DOM元素有一个高度,overflow-y设置为auto。而且要保证外层的盒子的高度小于内层盒子的高度,内层的盒子也就是需要滑动滚动条的DOM元素。(如果内层的高度都小于外层的,也就没有滚动条的必要了~) 这其中有几个参数需要理解。 scrollHeight scrollTopscrollHeight是盒子的高度,用以下方式获取: historyBodyHeight = $('.history-body')[0].scrollHeightscrollTop是盒子距离头部的距离,这里有两点需要注意: 1.scrollTop 获取的值是滚动条产生的那个节点,也就是谁产生了滚动条,就获取谁的头部被卷去的距离,即scroll事件是由哪个元素触发的,这里就是哪个DOM的距离。 2.在window对象下,scrollTop这个参数是scrollY,这样获取: windowTop = $(window)[0].scrollY;这2个参数理解之后,还有一个前提就是要获取到外层盒子的高度,如果是window对象就是window的高度, windowHeight = $(window).height();可以用下面这个方法来判断滚动条滑动到底部,后面的-1需要根据实际情况改一下~ if (windowTop + windowHeight > historyBodyHeight-1) { console.log('滚到底部了'); }滑动加载就是在判断到滚动到底部的地方,来实现分页加载的逻辑,一般是会用ajax去分页请求数据~
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |