很久没记笔记了，最近搞起web开发了

<html>

<head>

    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

   <script type="text/javascript">

                function insertcode() {

                    var $body = $("body");

                    $body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')

                    $("#page_tag_load").hide();

                }

                $(document).ready(function () {

                    $(window).scroll(function () {

                        var $body = $("body");

                        var $html = "";

                        $html += "<br/>" + ($(window).height() + $(window).scrollTop());

                        $html += "<br/>window.height: " + $(window).height();

                        $html += "<br/>body.height: " + $body.height();

                        $html += "<br/>window.scrollTop: " + $(window).scrollTop();

                        $("#page_tag_bottom").html($html);

                        /*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/

                        if (($(window).height() + $(window).scrollTop()) >= $body.height()) {

                            $("#page_tag_load").show();

                            //setTimeout(insertcode, 1000);/*IE 不支持*/

                            insertcode();

                        }

                    });

                });

    </script>

</head>

<body>

    <div style=" height:1000px; font-size:24px;">新增项目</div>

    <div id="page_tag_bottom" style=" width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>

    <div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>

</body>

</html>

以上代码根据滚动条位置触发一个insertcode(),函数，这个函数可以用ajax，获取服务器接口数据，然后重绘dom

js 根据滚动条加载数据的更多相关文章

  1. vue 中监测滚动条加载数据（懒加载数据）

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  2. Vue.js中滚动条加载更多数据

    本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...

  3. jquery滚动条加载数据

    //滚动条  $(window).scroll(function () {   var scrollTop = $(this).scrollTop();   var scrollHeight = $( ...

  4. js滚动异步加载数据的思路

    <body> <div style="width:200px; height:1000px; border:1px solid red;" id="to ...

  5. Highcharts 异步加载数据曲线图表

    导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...

  6. Highcharts 基本曲线图；Highcharts 带有数据标签曲线图表；Highcharts 异步加载数据曲线图表

    Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...

  7. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  8. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  9. js实现滚动条来动态加载数据

    主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...

随机推荐

  1. ABAP-会计凭证替代字段GB01设置

    1.GB01表字段设置 SM30:VWTYGB01 找到需要替代的字段,设置bexclude勾选为空 2.运行程序 RGUGBR00 激活

  2. [LeetCode] 95. 不同的二叉搜索树 II ☆☆☆(递归，n个数组成的所有二叉搜索树)

    https://leetcode-cn.com/problems/unique-binary-search-trees-ii/solution/xiang-xi-tong-su-de-si-lu-fe ...

  3. URLErro和HTTPError

    url error URLError 产生的原因主要有: 没有网络连接 服务器连接失败 找不到指定的服务器 我们可以用try except语句来捕获相应的异常 from urllib import r ...

  4. Windows Server 2008上网设置——IE

    IE安装设置 在 Windows Sever 2008 中打开 IE 浏览器时,IE 会出现[已启用 Internet Explorer 增强的安全配置]的提示信息. Windows Server 2 ...

  5. Python基础——运行机理

    Python解释器 从Python这门编程语言的实现上来讲,Python是一个名为解释器的软件包,包含:一个解释器 和 支持的库 解释器又有不同版本:CPython.Jython.IronPython ...

  6. 详细讲解vue.js里的父子组件通信（props和$emit）

    在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <d ...

  7. python listdir() 中文路径 中文文件夹 乱码 解决方法

    python listdir() 中文路径 中文文件夹 乱码 解决方法 listdir(path)返回的结果的编码似乎和我们提供的 path 参数的编码有关: path = 'd:/test' try ...

  8. CSS定位有几种？分别描述其不同

    static(静态定位):即默认值,元素框正常生成的,top.right.bottom.left这些偏移属性不会影响静态定位的正常显示(属性不应用): relative(相对定位):元素相对自身偏移某 ...

  9. go语言-关于文件的操作和解释

    一.文件存放的位置 bin文件:存放编译后的二进制文件 pkg文件:存放编译后的库文件 src文件:存放源代码文件 二.运行文件的常用命令 两种运行区别(直接运行和编译后运行) 1.编译生成可执行文件 ...

  10. scoket --- 练习

    三次握手,四次挥手(面试会问) 三次握手建连 [] 最开始的时候客户端和服务器都是处于CLOSED状态.主动打开连接的为客户端,被动打开连接的是服务器. TCP服务器进程先创建传输控制块TCB,时刻准 ...