zoukankan      html  css  js  c++  java
  • JQ-滚动条下拉无限的加载数据

    一、原理

      利用滚动的高度,如果滚动的高度到达一定范围,就加载数据

    二、实现

      利用$(document.body).outerWidth()获取的是屏幕的高度,这个是固定的,不变的

      利用$(window).scrollTop()获取您滚动的高度

      利用$(document).height()获取总的高度 

      注:$(widnow).height()这个是可视区的高度,这个跟$(document).height()很容易混淆

    三、上代码

      

    <section>
      <div id="tishi">
        <p>this is a scroll test;</p>
        <p>页面下拉自动加载内容</p>
      </div>
      <div id="main">
        <p>hello world test DIV</p>
      </div>
    </section>

    $(function(){
      $(window).scroll(function(){
        if($(window).scrollTop() > $(document.body).outerWidth() - $('#tishi').height()){
          var s='<p class="load">我可以无限制的加载...</p>';
          $('#main').append(s);
        }
      })
    })

  • 相关阅读:
    Linux 的特殊变量(2)
    Shell 的特殊变量
    linux shell 基本规范
    Linux C 程序的开发环境
    编译和连接
    编程语言与C语言的简介
    Python条件判断和循环语句
    Python基本数据类型
    Java基本数据类型
    Jmeter(1)下载和安装
  • 原文地址:https://www.cnblogs.com/xiaoyangtian/p/8030460.html
Copyright © 2011-2022 走看看