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. mysql数据恢复问题

    现象 mysql> drop database zabbix; Query OK, 104 rows affected (0.30 sec)mysql> exitBye[root@mysq ...

  2. json格式化和查看工具

    以前一直以来都觉得xml个可读性要比json的可读性好,后来使用了JSON Viewer这个小工具之后,发现自己错了.之前认为json的可读性差,完全是因为没有很好的查看工具.JSON Viewer这 ...

  3. sql的ExecuteScalar(),ExecuteNonQuery()

    一,ExecuteScalar ExecuteScalar()也返回一个int型变量.如果SQL语句是Select查询,则仅仅返回查询结果集中第一行第一列,而忽略其他行和列.如果SQL语句不是Sele ...

  4. maven插件报错之解决

    maven插件报错之解决 用m2eclipse创建Maven项目时报错 maveneclipsebuilddependenciesauthorizationplugins 用m2eclipse创建 ...

  5. TypeUtils -- Object 转为 强类型

    public static class TypeUtils { /// <summary> /// Object 转为 强类型 /// </summary> public st ...

  6. js格式化时间为JSON格式 ajax提交 后台处理

    var effectRow = new Object();if ($('#grd_infos').datagrid('getChanges').length) {    var update = $( ...

  7. Android studio自动删除没用的资源

    有时候我们添加的一些资源,如图片和一些没用的代码,以及在添加第三方库的时候我们只需要使用其中的一部分功能和一部分资源,那么这个时候如果靠我们手工去怕是非常难做的,尤其是项目大的时候,Android 团 ...

  8. dwr推送技术深入研究

    DWR 工作原理: 是通过动态把 Java 类生成为 Javascript.它的代码就像 Ajax 一样,你感觉调用就像发生在浏览器端,但是实际上代码调用发生在服务器端,DWR 负责数据的传递和转换. ...

  9. 真的了解JS么?

    1.setTimeout setTimeout(function(){ }),1000) setTimeout(function(num){ alert(num)    //弹123 },1000,1 ...

  10. IOS常遇问题个人收藏网址指南

    代码适配Masonry使用的详细介绍: http://blog.csdn.net/majiakun1/article/details/51160339 Masonry使用注意篇: http://www ...