js 判断滚动到页面底部

CreateTime--2018年4月14日10:13:07

Author:Marydon

1.使用场景：

　　滚动到屏幕底部，触发加载分页数据请求（qq空间，手机端）

2.代码实现

　　javascript方式

window.onscroll = function() {//获取被卷去高度var scrollTop = document.body.scrollTop;//获取窗口高度（可见区域高度）var windowHeight = document.documentElement.clientHeight;//获取文档高度var documentHeight = document.body.scrollHeight;if (scrollTop + windowHeight >= documentHeight) {$('#nomore').show();//发送Ajax请求获取分页数据
    }
}

　　jQuery方式

$(window).scroll(function() {//获取被卷去高度var scrollTop = $(this).scrollTop();//获取窗口高度（可见区域高度）var windowHeight = $(this).height();//获取文档高度var documentHeight = $(document).height();if (scrollTop + windowHeight >= documentHeight) {$('#nomore').show();//发送Ajax请求获取分页数据
    }
});

区别：javascript的onscroll事件只能定义一次，而jQuery的scroll事件可以定义多次，还不会冲突。

javascriptjquery 判断滚动到页面底部相关推荐

用Javascript滚动到页面底部，并能正确判断出页面已到底部的方法
现在的页面大部分都是通过Js渲染来显示页面的,也就是如果不滚动到页面底部就无法获取整个页面的HTML源码,如果通过CURL等抓取网页那么基本上抓取到都是一堆javascript代码. 所以就有了web ...
滚动到页面底部自动加载内容
上网时经常会看到许多酷炫的网页,其中给我印象较深刻的是鼠标滚动到页面底部时会自动加载内容,一直都很好奇是怎么样做到的,于是自己也尝试着写了一下. 先上个完整代码吧: <!DOCTYPE html ...
js实现判断滚动条滚到页面底部并执行事件的方法
这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...
java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件
[Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...
C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
ajax文字上下滚动,ajax页面底部滚动加载效果实例
html部分: //ajax读取的 data.html 使用append 的方式添加到这里 //ajax 状态文字输出到这里 [数据加载中][数据加载成功][没有数据了] js代码需要jquery支持 ...
js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
转载链接:http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配 ...
滑轮滚动到页面底部ajax加载数据的实例
滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷. 当然本例子采用的是jquery库,后期会做成原生js. 本例的数据调用的是锋利的j ...
判断小程序是否滚动到页面底部 scrolltolower_微信小程序长列表性能优化——recycle-view
背景: 第七次人口普查项目使用是微信小程序原生框架,组件是根据用户需求由项目组前端组组长封装完成的.采集小程序正式登记首页列表页面,根据腾讯老哥在sentry上的监控可以看出,列表页面前端性能比较差, ...

javascriptjquery 判断滚动到页面底部

js 判断滚动到页面底部

CreateTime--2018年4月14日10:13:07

Author:Marydon

相关推荐：

javascriptjquery 判断滚动到页面底部相关推荐

最新文章

热门文章