如何自动计算屏幕滚动时加载事件?
来源:互联网 发布:windows凭据 编辑:程序博客网 时间:2024/05/24 06:25
经常我们在开发工作中面临这种问题,特别是拖动滚动条到一定距离时需要加载事件,一般用于分页加载数据。
因此今天总结了一种方法:
首先必须明白几个元素属性的意思:
(1)获取浏览器显示区域(可视区域)的高度 :$(window).height();
(2)获取浏览器显示区域(可视区域)的宽度 :$(window).width();
(3)获取页面的文档高度:$(document).height();
(4)获取页面的文档宽度 :$(document).width();
(5)浏览器当前窗口文档body的高度:$(document.body).height();
(6)浏览器当前窗口文档body的宽度:$(document.body).width();
(7)获取滚动条到顶部的垂直高度 (即网页被卷上去的高度):$(document).scrollTop();
(8)获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
(9)获取或设置元素的宽度:$(obj).width();
(10)获取或设置元素的高度:$(obj).height();
(11)某个元素的上边界到body最顶部的距离:obj.offset().top;//(在元素的包含元素不含滚动条的情况下)
(12)某个元素的左边界到body最左边的距离:obj.offset().left;//(在元素的包含元素不含滚动条的情况下)
(13)返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top//(在元素的包含元素含滚动条的情况下)
(14)返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left//(在元素的包含元素含滚动条的情况下)
示例:假如有一个div里面有两个小div,一上一下的。
现在情况我需要使div中id=“div2”区域滚动,div中id=“div1”固定不动,然后id="div2"的右边带上滚动条,一旦滚动条拉到底部就自动加载数据。
代码如下:
<div class="container">
<div id="div1">
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉罢了罢了罢了吧
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉罢了罢了罢了吧
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉罢了罢了罢了吧
</div>
<div id="div2" style=" overflow:auto;-webkit-overflow-scrolling:touch">
滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域
滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域
滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域
滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域
</div>
</div>
js代码:
self.minotor = function(){
//先自动动态计算div中的id=“div2”的高度(也就是滚动的区域距离)
var scrollheight = parseInt($(document).height())-parseInt($("#div1").css("height"))
console.log("滚动区域高度大小"+scrollheight);
//动态设置成滚动区域的高度大小,这样的话右边的侧边栏就会出现滚动条。
$("#div2").css("height",scrollheight+"px");
//滚动区域滚动加载数据
$("#div2").scroll(function(){
var $this = $(this),
viewH = $(this).height(),//可见高度
contentH = $(this).get(0).scrollHeight,//内容高度
scrollTop = $(this).scrollTop(),//滚动高度
if(contentH-viewH-scrollTop<=10){//内容高度减去可见高度-滚动高度小于等于10的时候加载数据
//加载数据
loadData();
}
})
}
- 如何自动计算屏幕滚动时加载事件?
- 滚动条(如果超出屏幕,自动计算滚动)
- 滚动时自动加载内容
- 滚动时自动加载内容
- 滚动屏幕加载信息
- 屏幕滚动事件兼容性
- 实现屏幕自动滚动
- Jquery的 scroll事件,实现当滚动条到达最底部时,自动加载新项
- ListView滚动时加载图片(只加载当前屏幕图片)
- vue滚动自动加载
- JS双击自动滚动屏幕
- Jquery的 scroll事件,实现当滚动条到达最底部时,自动加载新项[转]
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
- jquery FireFox中滚动条设置为auto时,存在一个滞后显示的问题,如何获得滚动条的加载完毕事件或显示事件
- 手机端滚动屏幕加载更多
- 浏览器、窗口、屏幕、滚动条、滚轮事件
- 双击鼠标自动滚动屏幕的代码
- android Listview下拉滚动时自动加载数据
- JS之获取指定位置Unicode的charCodeAt()方法
- docker容器和Linux的一些指定,以便自己查阅
- BaseRecyclerViewAdapterHelper的使用
- 常用控件之ImageView
- 不固定宽高img在div中水平且垂直居中
- 如何自动计算屏幕滚动时加载事件?
- Android 中如何实现 显示和隐藏软键盘
- 上海中国电信IPTV频道列表
- 示例:产品模块组件式搭建
- wamp扩展ssh
- 自动点击事件
- Linux 下安装 wowza 服务器
- hdfs数据流读取
- Android—viewpage+Fragment