js 判断滚动到页面底部

CreateTime--2018年4月14日10:13:07

Author:Marydon

1.使用场景：

　　滚动到屏幕底部，触发加载分页数据请求（qq空间，手机端）

2.代码实现

　　javascript方式

window.onscroll = function() {

    //获取被卷去高度

    var scrollTop = document.body.scrollTop;

    //获取窗口高度（可见区域高度）

    var windowHeight = document.documentElement.clientHeight;

    //获取文档高度

    var documentHeight = document.body.scrollHeight;

    if (scrollTop + windowHeight >= documentHeight) {

        $('#nomore').show();

        //发送Ajax请求获取分页数据

    }

}

　　jQuery方式

$(window).scroll(function() {

    //获取被卷去高度

    var scrollTop = $(this).scrollTop();

    //获取窗口高度（可见区域高度）

    var windowHeight = $(this).height();

    //获取文档高度

    var documentHeight = $(document).height();

    if (scrollTop + windowHeight >= documentHeight) {

        $('#nomore').show();

        //发送Ajax请求获取分页数据

    }

});

区别：javascript的onscroll事件只能定义一次，而jQuery的scroll事件可以定义多次，还不会冲突。

javascript&jquery 判断滚动到页面底部的更多相关文章

Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
index.php代码 [html] view plaincopy <!DOCTYPE html PUBLIC ;} .single_item{padding: ...
jquery实现滚动到页面底部时无限加载内容的代码
var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scrol ...
jQuery判断滚动条滚到页面底部脚本
原文地址 http://www.111cn.net/wy/jquery/61741.htm
基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
vue 实现滚动到页面底部开始加载更多
直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...
vue使用H5实现滚动到页面底部时加载数据
使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...
jquery判断滚动到某个div显示底部按钮
判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...
Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

[LeetCode] Game of Life 生命游戏
According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a cellul ...
冰冻三尺非一日之寒--还是web
第十五章 javascript(js) DOM编程 javascript介绍 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript ...
Linux下c开发之线程通信（转）
Linux下c开发之线程通信(转) 1.Linux“线程” 进程与线程之间是有区别的,不过Linux内核只提供了轻量进程的支持,未实现线程模型.Linux是一种“多进程单线程”的操作系统.Linu ...
Web打印--Lodop API
Lodop是一款专业的WEB打印控件,其设计目标是简单易用.功能足够强大,开创WEB打印开发的新局面. Lodop设计者对WEB下的打印开发任务进行了分类汇总,高度抽象,设计出仅用几个功能函数,就可实 ...
Vmware workstation 10 NAT功能总是不正常的原因
原来运行一切正常的VMWARE WORKSTATION 10,突然出现NAT功能不能正常工作的情况. 表现是:如果将虚拟机的网卡设置为NAT模式,可以PING通网关及LAN内的主机,但是PING不通外 ...
九度oj 1349 数字在排序数组中出现的次数
原题链接:http://ac.jobdu.com/problem.php?pid=1349 二分.. #include<algorithm> #include<iostream> ...
css3 旋转出现动画
@-moz-keyframes daf{ 0% { -moz-transform: rotate(-360deg) scale(0.2); -webkit-transform: rotate(-360 ...
PHP 发布两个不用递归的树形数组构造函数(转)
<?php/** *创建父节点树形数组 * 参数 $ar 数组,邻接列表方式组织的数据 $id 数组中作为主键的下标或关联键名 $pid 数组中作为父键的下标或关联键名 * 返回多维数组 ** ...
java获得上下周及本周日期
public static SimpleDateFormat getFormat(String format) { return new SimpleDateFormat(format); } /** ...
mysql 中表和数据库名称不要使用 '-' 命名
mysql 中表和数据库名称不要使用 '-' 命名若使用这个符号,比如 my-name 做为数据库表名称那么在 sql 中必须如下: select * from `my-name`

javascript&jquery 判断滚动到页面底部

js 判断滚动到页面底部

CreateTime--2018年4月14日10:13:07

Author:Marydon

相关推荐：

javascript&jquery 判断滚动到页面底部的更多相关文章

随机推荐

热门专题