jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部:http://www.haorooms.com/post/jquery_scroll_upanddown

 //滚动条滚动加载更多内容
//判断滚动方向
function scroll(fn) {
var beforeScrollTop = document.body.scrollTop || document.documentElement.scrollTop,
fn = fn || function() {};
window.addEventListener("scroll", function() {
var afterScrollTop = document.body.scrollTop || document.documentElement.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if(delta == ) return false;
fn(delta > ? "down" : "up");
beforeScrollTop = afterScrollTop;
}, false);
}
//调用滚动方向:到达底部并且向下滚动的时候,加载更多评论
scroll(function(direction) {
if(direction=="down"){
console.log(direction); var scrollTop = $(window).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
//滚动到达底部
if (scrollTop + windowHeight == scrollHeight) {
$(".commListUl").append('<li class="commListLi"><figure class="left"><img src="http://staticcdn.dev.pydp888.com/cms/news/v1/img/listImg1.png"></figure><!-- 内容 --><div class="left commListCon"><p><span>韩旭明</span>&nbsp;&nbsp;<span>1小时前</span></p><p>承担包机任务的是高丽航空商社,也是朝鲜唯一的航空公司,由于大家周知的原因,朝鲜无法获得西方国家的先进客机,高丽航空的飞机全部为前苏联机型,不少都超过了正常服役年限。执飞此次航线的安-148,为中短途支线客机,由乌克兰安托若夫设计局设计,算是朝鲜目前比较新的机型,因朝鲜领导人金正恩经常搭乘该型飞机出行,也被称为"金正恩专机"。</p></div><div style="clear:both;"></div> </li>');
}
}
});

——————————————————————————————————————————————————————————

//判断鼠标滑轮方向
var scrollFunc = function (e) {
var direct = ;
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > ) { //当滑轮向上滚动时
//alert("滑轮向上滚动");
var scrollTop = $(window).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
//滚动到达底部
if (scrollTop + windowHeight == scrollHeight) {
$(".commListUl").append('<li class="commListLi"><figure class="left"><img src="http://staticcdn.dev.pydp888.com/cms/news/v1/img/listImg1.png"></figure><!-- 内容 --><div class="left commListCon"><p><span>韩旭明</span>&nbsp;&nbsp;<span>1小时前</span></p><p>承担包机任务的是高丽航空商社,也是朝鲜唯一的航空公司,由于大家周知的原因,朝鲜无法获得西方国家的先进客机,高丽航空的飞机全部为前苏联机型,不少都超过了正常服役年限。执飞此次航线的安-148,为中短途支线客机,由乌克兰安托若夫设计局设计,算是朝鲜目前比较新的机型,因朝鲜领导人金正恩经常搭乘该型飞机出行,也被称为"金正恩专机"。</p></div><div style="clear:both;"></div> </li>');
}
}
if (e.wheelDelta < ) { //当滑轮向下滚动时
//alert("滑轮向下滚动");
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> ) { //当滑轮向上滚动时
//alert("滑轮向上滚动");
var scrollTop = $(window).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
//滚动到达底部
if (scrollTop + windowHeight == scrollHeight) {
$(".commListUl").append('<li class="commListLi"><figure class="left"><img src="http://staticcdn.dev.pydp888.com/cms/news/v1/img/listImg1.png"></figure><!-- 内容 --><div class="left commListCon"><p><span>韩旭明</span>&nbsp;&nbsp;<span>1小时前</span></p><p>承担包机任务的是高丽航空商社,也是朝鲜唯一的航空公司,由于大家周知的原因,朝鲜无法获得西方国家的先进客机,高丽航空的飞机全部为前苏联机型,不少都超过了正常服役年限。执飞此次航线的安-148,为中短途支线客机,由乌克兰安托若夫设计局设计,算是朝鲜目前比较新的机型,因朝鲜领导人金正恩经常搭乘该型飞机出行,也被称为"金正恩专机"。</p></div><div style="clear:both;"></div> </li>');
}
}
if (e.detail< ) { //当滑轮向下滚动时
//alert("滑轮向下滚动");
}
}
ScrollText(direct);
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;

jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部的更多相关文章

  1. Jquery判断滚动条是否到达窗口顶部和底部

    <script type="text/javascript"> $(document).ready(function(){     alert($(window).he ...

  2. jquery判断滚动条是否到底部

    clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight ...

  3. Jquery 判断滚动条到达顶部或底部

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

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

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

  5. jquery判断滚动条到底

    $(document).scroll(function(){ var dHeight = $(document).height(); var wHeight = $(window).height(); ...

  6. JQuery 判断滚动条是否到底部

    BottomJumpPage: function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).he ...

  7. jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jquery判断页面滚动条(scroll)是上滚还是下滚

    单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...

  9. jquery判断div滚动条到底部

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...

随机推荐

  1. java中常遇到的问题

    一.乱码问题 =========================================================================================== 方 ...

  2. Maven之(一)Maven是什么

    首先,Maven的正确发音是[ˈmevən],而不是"马瘟"以及其他什么瘟.Maven在美国是一个口语化的词语,代表专家.内行的意思,约等于北京话中的老炮儿. 一个对Maven比较 ...

  3. robotium测试

    作者:贺锐链接:https://www.zhihu.com/question/28466134/answer/40921012来源:知乎著作权归作者所有,转载请联系作者获得授权. 直接用自己的手机上就 ...

  4. centos 6.5 安装openssl

    1.下载wget https://www.openssl.org/source/openssl-1.0.2h.tar.gz 2.解压tar zxf openssl-1.0.2h.tar.gzcd op ...

  5. mysql的注释

    一直没怎么用过mysql数据库, 今天用mysqldump备份了一下表结构, 记录一下遇到的问题 1. mysqldump默认导出没有事务和存储过程, 如果想导出这些可以用 -E 和 -R[--rou ...

  6. CSS继承性+层叠性+盒子+浮动

        CSS继承性+层叠性+盒子+浮动 CSS继承性 <style>         div{             color: pink;             font-siz ...

  7. HDU 5869 Different GCD Subarray Query

    离线操作,树状数组,$RMQ$. 这个题的本质和$HDU$ $3333$是一样的,$HDU$ $3333$要求计算区间内不同的数字有几个. 这题稍微变了一下,相当于原来扫描到$i$的之后是更新$a[i ...

  8. DB2导入导出 学习笔记

    db2pd -osinfodb2mtrk -i -d (for aix)db2 get dbm cfg show detaildb2 get db cfg show detaildb2 get sna ...

  9. 为什么Intent传递对象的时候必须要将对象序列化呢?

    Intent可以算是四大组件之间的胶水,比如在Activity1与Activity2之间传递对象的时候,必须要将对象序列化, 可是为什么要将对象序列化呢? Intent在启动其他组件时,会离开当前应用 ...

  10. jsp或servlet返回并刷新页面

    2012-04-27 22:39:05|  分类: JAVA |  标签:返回刷新  |举报|字号 订阅     只用window.history.back(-1);返回页面但不会刷新,还是原来的数据 ...