jquery判断页面滚动条(scroll)是上滚还是下滚
单纯判断滚动条方向
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)是上滚还是下滚的更多相关文章
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery判断页面滚动条滚动方向
废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...
- jquery让页面滚动条top,滚动条 顶部
jquery让页面滚动条top,滚动条 顶部$(document).scrollTop(0);
- jquery判断div滚动条到底部
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...
- jQuery 判断页面元素是否存在的代码
在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- jquery判断页面元素是否存在
在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- jquery判断页面网址是否有效
方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html><html><head lang="en"> &l ...
- jQuery 判断页面元素是否存在
if ( $("#someID").length > 0 ) { } 根据JavaScript的经验,尝试用$("#someID") != " ...
随机推荐
- asp.net framework identity 学习笔记
关于 cookie expiry & securityStamp http://www.jamessturtevant.com/posts/ASPNET-Identity-Cookie-Aut ...
- CLOUDSTACK我也来啦
最近,专业客户需要私有云和自助管理. 那我就倒一个CLOUDSTACK出来吧. WEB UI已搞定. 难点在于高级网络和主存储.再接再力. ... 因为要反复重装,在服务端有个快速重建步骤: serv ...
- 两种解法-树形dp+二分+单调队列(或RMQ)-hdu-4123-Bob’s Race
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4123 题目大意: 给一棵树,n个节点,每条边有个权值,从每个点i出发有个不经过自己走过的点的最远距离 ...
- selenium webdriver python 操作浏览器
新建driver driver=webdriver.Firefox() driver=webdriver.Ie() driver=webdriver.Chrome() 打开一个链接 driver. ...
- PS:改装店收的是友情价,包安装十五个毛主席。
糟糠之妻下堂,娇俏公主上位--更换宝马三系座椅作业 - 切诺基 Jeep家族 越野e族论坛 越野/SUV/旅行/赛事/改装/互动中心 PS:改装店收的是友情价,包安装十五个毛主席.
- XML的四种解析器原理及性能比较
转自zsq 1.DOM DOM 是用与平台和语言无关的方式表示 XML 文档的官方 W3C 标准.DOM 是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分 ...
- php-redis扩展模块安装记录
redis的安装可以参考:centos下部署redis服务环境的操作记录 下面记录下php-redis扩展模块的安装过程:php的安装目录是/Data/app/php5.6.26 下载phpredis ...
- HDU 2485 Destroying the bus stations (IDA*+ BFS)
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2485 题意:给你n个点,m条相连的边,问你最少去掉几个点使从1到n最小路径>=k,其中不能去掉1, ...
- js中内建对象
JavaScript charAt() 函数 string.charAt(n) -- 返回指定位置(n)的字符 char是character的缩写,中文"符号,字符" 引用网址:h ...
- 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 ...