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事件可以定义多次,还不会冲突。

相关推荐:

js 判断进入可视区域

 

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

  1. Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

    index.php代码   [html] view plaincopy <!DOCTYPE html PUBLIC ;}                .single_item{padding: ...

  2. jquery实现滚动到页面底部时无限加载内容的代码

    var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scrol ...

  3. jQuery判断滚动条滚到页面底部脚本

    原文地址 http://www.111cn.net/wy/jquery/61741.htm

  4. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  5. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  6. vue 实现滚动到页面底部开始加载更多

    直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...

  7. vue使用H5实现滚动到页面底部时加载数据

    使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了 实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...

  8. jquery判断滚动到某个div显示底部按钮

    判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...

  9. Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. [LeetCode] Game of Life 生命游戏

    According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a cellul ...

  2. 冰冻三尺非一日之寒--还是web

    第十五章  javascript(js) DOM编程 javascript介绍 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript ...

  3. Linux下c开发 之 线程通信(转)

    Linux下c开发 之 线程通信(转) 1.Linux“线程” 进程与线程之间是有区别的,不过Linux内核只提供了轻量进程的支持,未实现线程模型.Linux是一种“多进程单线程”的操作系统.Linu ...

  4. Web打印--Lodop API

    Lodop是一款专业的WEB打印控件,其设计目标是简单易用.功能足够强大,开创WEB打印开发的新局面. Lodop设计者对WEB下的打印开发任务进行了分类汇总,高度抽象,设计出仅用几个功能函数,就可实 ...

  5. Vmware workstation 10 NAT功能总是不正常的原因

    原来运行一切正常的VMWARE WORKSTATION 10,突然出现NAT功能不能正常工作的情况. 表现是:如果将虚拟机的网卡设置为NAT模式,可以PING通网关及LAN内的主机,但是PING不通外 ...

  6. 九度oj 1349 数字在排序数组中出现的次数

    原题链接:http://ac.jobdu.com/problem.php?pid=1349 二分.. #include<algorithm> #include<iostream> ...

  7. css3 旋转出现动画

    @-moz-keyframes daf{ 0% { -moz-transform: rotate(-360deg) scale(0.2); -webkit-transform: rotate(-360 ...

  8. PHP 发布两个不用递归的树形数组构造函数(转)

    <?php/** *创建父节点树形数组 * 参数 $ar 数组,邻接列表方式组织的数据 $id 数组中作为主键的下标或关联键名 $pid 数组中作为父键的下标或关联键名 * 返回 多维数组 ** ...

  9. java获得上下周及本周日期

    public static SimpleDateFormat getFormat(String format) { return new SimpleDateFormat(format); } /** ...

  10. mysql 中表和数据库名称不要使用 &#39;-&#39; 命名

    mysql 中表和数据库名称不要使用 '-' 命名 若使用这个符号,比如 my-name 做为数据库表名称 那么在 sql 中必须如下: select * from `my-name`