基于javascript实现浏览器滚动条快到底部时自动加载数据
废话不多说了，直接给大家贴js代码了。
<!DOCTYPE html>
<html>
<head>
<script src="jquery-...js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var range = ; //距下边界长度/单位px
var elemt = ; //插入元素高度/单位px
var maxnum = ; //设置加载最多次数
var num = ;
var totalheight = ;
var main = $("#content"); //主体元素
$(window).scroll(function () {
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
//console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
//console.log("页面的文档高度 ："+$(document).height());
//console.log('浏览器的高度：'+$(window).height());
totalheight = parseFloat($(window).height()) + parseFloat(srollPos);//滚动条当前位置距顶部距离+浏览器的高度
if (($(document).height() - totalheight) <= range && num != maxnum) {//页面底部与滚动条底部的距离<range
main.append("<div style='border:px solid tomato;margin-top:px;color:#ac" + (num % ) + (num % ) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
main.append("<div style='border:px solid tomato;margin-top:px;color:#ac" + (num % ) + (num % ) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
num++;
}
});
});
</script>
</head>
<body>
<div id="content" style="height:px">
<div id="follow">this is a scroll test;<br /> 页面下拉自动加载内容</div>
<div style='border:px solid tomato;margin-top:px;color:#ac;height:'>hello world test DIV</div>
</div>
</body>
</html>
ps：原生JavaScript如何触发滚动条事件?
<script>
window.onscroll = function(){
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
var scrollH = document.documentElement.scrollHeight||document.body.scrollHeight;
var clientH = document.documentElement.clientHeight||document.body.clientHeight
//console.log(scrollT +"+"+scrollH+"+"+clientH);
if(scrollT == scrollH - clientH){
console.log("到底部了");
}else if(scrollT == 0){
console.log("到顶部了");
}
}
</script>
-
本文向大家介绍js实现滚动条滚动到页面底部继续加载，包括了js实现滚动条滚动到页面底部继续加载的使用技巧和注意事项，需要的朋友参考一下 这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。 原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果
-
本文向大家介绍基于JavaScript实现自定义滚动条，包括了基于JavaScript实现自定义滚动条的使用技巧和注意事项，需要的朋友参考一下 可直接使用的js滚动条，先看看效果图： 代码如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
现在的情况是：当内部滚动条滚动到底部时如果继续滚动，外部滚动条不会滚动，需要停顿或者移动鼠标滚动才能触发外层滚动条
-
本文向大家介绍JS JQUERY实现滚动条自动滚到底的方法，包括了JS JQUERY实现滚动条自动滚到底的方法的使用技巧和注意事项，需要的朋友参考一下 设置页面加载时滚动条自动滚到底的方法： jQuery： JavaScript： 以上2种方法均可以实现页面加载时滚动条自动滚动到底，小伙伴们根据自己的实际需求，自由选择吧
-
问题内容： 我需要检测用户是否滚动到页面底部。如果它们在页面底部，则当我在底部添加新内容时，我将自动将它们滚动到新底部。如果它们不在底部，则它们正在阅读页面上较高的内容，因此，我不想自动滚动它们，因为它们希望停留在原处。 如何检测用户是滚动到页面底部还是滚动到页面较高？ 问题答案： window.onscroll = function(ev) { if ((window.innerHeight +
-
本文向大家介绍jQuery实现浮动层随浏览器滚动条滚动的方法，包括了jQuery实现浮动层随浏览器滚动条滚动的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下： 这是jQuery实现的一个浮动层效果，随浏览器滚动条而滚动，并一直保持在顶部位置，请使用火狐测试，IE下表现不尽理想。 运行效果截图如下： 在线演示