单纯判断滚动条方向

function scroll( fn ) {
var beforeScrollTop = document.body.scrollTop,
fn = fn || function() {};
window.addEventListener("scroll", function() {
var afterScrollTop = document.body.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if( delta === 0 ) return false;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
}

调用方法:

scroll(function(direction) { console.log(direction) });

以上方法手机苹果浏览器事件会跳动,解决方法及代码改进

scrollDirect: function (fn) {
var beforeScrollTop = document.body.scrollTop;
fn = fn || function () {
};
window.addEventListener("scroll", function (event) {
event = event || window.event; var afterScrollTop = document.body.scrollTop;
delta = afterScrollTop - beforeScrollTop;
beforeScrollTop = afterScrollTop; var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
fn('up');
return;
}
if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
fn('up');
} else {
if (Math.abs(delta) < 10) {
return false;
}
fn(delta > 0 ? "down" : "up");
}
}, false);
}

调用方法:

   var upflag=1;
var downflag= 1;
//scroll滑动,上滑和下滑只执行一次!
scrollDirect(function (direction) {
if (direction == "down") {
if (downflag) {
$(".footer_wrap").slideUp(200);
downflag = 0;
upflag = 1;
}
}
if (direction == "up") {
if (upflag) {
$(".footer_wrap").slideDown(200);
downflag = 1;
upflag = 0;
}
}
});

滚动条滚动到底部和头部判断

其实我上面的函数中已经有判断,下面再列一下!看如下函数!

BottomJumpPage: function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) { //滚动到底部执行事件
console.dir("我到底部了"); }
if (scrollTop == 0) { //滚动到头部部执行事件
console.dir("我到头部了"); }
}

调用方法:

$(window).scroll(BottomJumpPage);

判断div是否滚动到底部

上面的方法是判断滚动轴是否滚动到底部,但是有时候,我们在做滚动加载的时候,有时候也要做某个div是否滚动到底部然后加载。那么如何判断DIV的滚动轴滚动到底部呢?

这个也需要了解几个高度:

1、div的高度 $("#某div").height();

2、滚动轴的高度 $(#某div)[0].scrollHeight

3、滚动轴到div顶部的高度 $(某div)[0].scrollTop;

书写代码如下:

 $(document).ready(function (){
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $("#div1").height();
$("#div1").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
if(nScrollTop + nDivHight >= nScrollHight)
alert("滚动条到底部了");
});
});

jquery判断页面滚动条(scroll)是上滚还是下滚的更多相关文章

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

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

  2. jQuery判断页面滚动条滚动方向

    废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...

  3. jquery让页面滚动条top,滚动条 顶部

    jquery让页面滚动条top,滚动条 顶部$(document).scrollTop(0);

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

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

  5. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  6. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  7. jquery判断页面元素是否存在

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  8. jquery判断页面网址是否有效

    方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html><html><head lang="en"> &l ...

  9. jQuery 判断页面元素是否存在

    if ( $("#someID").length > 0 ) {  } 根据JavaScript的经验,尝试用$("#someID") != " ...

随机推荐

  1. asp.net framework identity 学习笔记

    关于 cookie expiry & securityStamp http://www.jamessturtevant.com/posts/ASPNET-Identity-Cookie-Aut ...

  2. CLOUDSTACK我也来啦

    最近,专业客户需要私有云和自助管理. 那我就倒一个CLOUDSTACK出来吧. WEB UI已搞定. 难点在于高级网络和主存储.再接再力. ... 因为要反复重装,在服务端有个快速重建步骤: serv ...

  3. 两种解法-树形dp+二分+单调队列(或RMQ)-hdu-4123-Bob’s Race

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4123 题目大意: 给一棵树,n个节点,每条边有个权值,从每个点i出发有个不经过自己走过的点的最远距离 ...

  4. selenium webdriver python 操作浏览器

    新建driver driver=webdriver.Firefox() driver=webdriver.Ie() driver=webdriver.Chrome()   打开一个链接 driver. ...

  5. PS:改装店收的是友情价,包安装十五个毛主席。

    糟糠之妻下堂,娇俏公主上位--更换宝马三系座椅作业 - 切诺基 Jeep家族 越野e族论坛 越野/SUV/旅行/赛事/改装/互动中心         PS:改装店收的是友情价,包安装十五个毛主席.

  6. XML的四种解析器原理及性能比较

    转自zsq 1.DOM     DOM 是用与平台和语言无关的方式表示 XML 文档的官方 W3C 标准.DOM 是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分 ...

  7. php-redis扩展模块安装记录

    redis的安装可以参考:centos下部署redis服务环境的操作记录 下面记录下php-redis扩展模块的安装过程:php的安装目录是/Data/app/php5.6.26 下载phpredis ...

  8. HDU 2485 Destroying the bus stations (IDA*+ BFS)

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2485 题意:给你n个点,m条相连的边,问你最少去掉几个点使从1到n最小路径>=k,其中不能去掉1, ...

  9. js中内建对象

    JavaScript charAt() 函数 string.charAt(n) -- 返回指定位置(n)的字符 char是character的缩写,中文"符号,字符" 引用网址:h ...

  10. MySQL主从复制与lvs+keepalived单点写入读负载均衡高可用实验【转】

    一.环境Master(主机A):192.168.1.1Slave(主机B) :192.168.1.2  W-VIP(写入)  :192.168.1.3 R-VIP(读取)  :192.168.1.4  ...