jquery滚动条操作

jquery滚动条操作在开发项目时,常常需要展示大量数据。如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了。面对这种问题,PC里使用了分页效果,将数据分成一页页,换页时请求当前页数据,而屏幕较小的移动端,分页就不怎么好看了,常用的方法是滚动到底部时继续加载数据滚动加载其实也是一种分页,只是不使用页码而已。(一)、滚动事件的效果和原理效果:滚动到当前页的底部时…

在开发项目时,常常需要展示大量数据。如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了。

面对这种问题,PC里使用了分页效果,将数据分成一页页,换页时请求当前页数据,

而屏幕较小的移动端,分页就不怎么好看了,常用的方法是滚动到底部时继续加载数据

滚动加载其实也是一种分页,只是不使用页码而已。

(一)、滚动事件的效果和原理

效果: 滚动到当前页的底部时,会转圈圈缓冲加载下一页的数据,完成后滚动区域和内容增加,以此类推;

原理: 3个数据(滚动视窗高度,滚动内容总高度, 当前已滚距离),

1个临界(滚动内容总高度 = 当前已滚距离 + 滚动视窗高度)

1.获取滚动视窗高度: ( w i n d o w ) . h e i g h t ( ) ; ( 如 果 滚 动 区 域 不 是 整 个 页 面 , 使 用 (window).height();(如果滚动区域不是整个页面,使用 (window).height()使(‘slector’).height())

2.获取滚动内容总高度:$(this).get(0).scrollHeight

3.当前已滚距离:$(this).scrollTop()

(二)、scroll滚动事件:$(selector).scroll(function() {})

复制代码

 function scrollFunc(){
     $("#container").scroll(function(){
        var $this =$(this),
        viewH =$(this).height(),//可见高度
        contentH =$(this).get(0).scrollHeight,//内容高度
        scrollTop =$(this).scrollTop();//滚动高度
        if(contentH = viewH + scrollTop) { //当滚动到底部时,

        }
    if(contentH - viewH - scrollTop <= 100) { //当滚动到距离底部100px时,

    }
    if(scrollTop/(contentH -viewH) >= 0.95){ //当滚动到距离底部5%时
    // 这里加载数据..
    }
 });

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/38920.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注