很久没记笔记了，最近搞起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. 开源项目hutool之zip_slip漏洞

    今天突然看到了去年写的一篇漏洞分析文章,搬到博客上 ---------------- Hutool是Github上的一个开源项目,是一个java的工具包,对文件.流.加密解密.转码.正则.线程.XML ...

  2. Xcode11.1 踩坑备忘录

    Xcode11.1 踩坑备忘录(mac系统10.15) 1 .环信ChatDemo2.0报错 这是环信ChatDemo2.0报错 NSInteger numberOfBeforeSection = [ ...

  3. ping IP 带时间戳循环显示并写入日志（windos版+linux版）

    在工作中,判断网络是否通畅,首选命令就是ping,但有时候我们需要持续ping一个或多个地址时,需要加 -t 即可,但有时候需要在ping的时候加入时间戳并把ping记录写入到日志里面,方法如下: w ...

  4. Android笔记（十五） Android中的基本组件——单选框和复选框

    单选框和多选框通常用来在设置用户个人资料时候,选择性别.爱好等,不需要用户直接输入,直接在备选选项中选择,简单方便. 直接看代码: <?xml version="1.0" e ...

  5. JAVA笔记整理（六），JAVA中的多态

    JAVA引用变量有两个类型:一个是编译时类型,一个运行时类型 编译时类型由声明该变量时使用的类型决定,运行时类型由实际赋给该变量的对象决定.如果编译时类型和运行时类型不一样,就形成了多态. 因为子类其 ...

  6. kvm虚拟化环境的搭建

    首先搭建kvm的虚拟化环境,我选择的环境是在vmvare上的Centos 7的虚拟机,在该环境上搭建kvm的虚拟化环境 1:安装虚拟机(该过程自行安装) 2:操作系统环境的设置 (1)修改内核模式为兼 ...

  7. LeetCode：137. 只出现一次的数字 II

    LeetCode:137. 只出现一次的数字 II 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现了三次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. ...

  8. 用js刷剑指offer(二叉搜索树与双向链表)

    题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 牛客网链接 js代码 /* function TreeNode(x) { ...

  9. 9.1： 请每个小组在 cnblogs.com 上面创建团队博客，第一个博客把小组成员都介绍一下 #团队博客作业1------------------答题者：徐潇瑞

    大家好,我们这个团队的名字叫14组之家,之所以这么叫,因为我们是在章亦葵老师的现代软件工程课上成立为14组,而且我们每个组员在这个小家庭中都感受到温暖,我们互相协作,互相配合,来完成我们的任务. 首先 ...

  10. linux 用户，密码，用户组

    linux 用户,密码,用户组 在root登陆的情况下: 用户密码: useradd <username> passwd <username> <提示输入密码>: ...