脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 滚动条到底部自动加载

基于javascript实现浏览器滚动条快到底部时自动加载数据

 更新时间：2015年11月30日 15:37:35   作者：iceKnight  
这篇文章主要介绍了基于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>
您可能感兴趣的文章:

相关文章

  • 简单谈谈JavaScript寄生式组合继承

    简单谈谈JavaScript寄生式组合继承

    寄生组合式继承,是集寄生式继承和组合继承的有点与一身,主要是通过借用构造函数来继承属性,通过原型链的混成形式来继承方法,这篇文章主要给大家介绍了关于JavaScript寄生式组合继承的相关资料,需要的朋友可以参考下
    2021-08-08
  • 微信小程序开发之路由切换页面重定向问题

    微信小程序开发之路由切换页面重定向问题

    这篇文章主要介绍了微信小程序开发之路由切换页面重定向问题，又通过实例代码给大家介绍了微信小程序的路由跳转方法,需要的朋友可以参考下
    2018-09-09
  • QRCode.js二维码生成并能长按识别

    QRCode.js二维码生成并能长按识别

    这篇文章主要为大家详细介绍了QRCode.js二维码生成并能长按识别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 详解JavaScript作用域 闭包

    详解JavaScript作用域 闭包

    这篇文章主要介绍了JavaScript作用域 闭包的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • javascript输入CD-KEY自动分割的代码

    javascript输入CD-KEY自动分割的代码

    开发过程中用写的一个脚本，记录下来以备后用与他用，其中attributes["max"].nodeValue是取HTML自定义的 max属性（兼容Firefox和IE）
    2010-10-10
  • 改变文件域的样式实现思路同时兼容ie、firefox

    改变文件域的样式实现思路同时兼容ie、firefox

    正如标题所言只是模拟了file文件域的外观，其实起作用的还是文件域file，这样就很方便，感兴趣的朋友可以了解下
    2013-10-10
  • 一文详解JavaScript数组对象和字符串对象

    一文详解JavaScript数组对象和字符串对象

    这篇文章主要介绍了JavaScript数组对象和字符串对象，文章中有详细的代码示例，对学习或工作有一定的帮助，需要的小伙伴可以参考一下
    2023-04-04
  • WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    下面小编就为大家带来一篇WebStorm ES6 语法支持设置&babel使用及自动编译(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript实现可拖拽的进度条

    JavaScript实现可拖拽的进度条

    这篇文章主要为大家详细介绍了JavaScript实现可拖拽的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • js 获取(接收)地址栏参数值的方法

    js 获取(接收)地址栏参数值的方法

    当地址栏含有参数，我们可以再目标页面通过window.location.search来获取我们需要的参数及其值，接下来为大家介绍下详细获取方法，感兴趣的朋友可以参考下哈
    2013-04-04

最新评论