jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部
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> <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> <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> <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判断滚动条是上滚还是下滚,且是否到达底部或顶部的更多相关文章
- Jquery判断滚动条是否到达窗口顶部和底部
<script type="text/javascript"> $(document).ready(function(){ alert($(window).he ...
- jquery判断滚动条是否到底部
clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight ...
- Jquery 判断滚动条到达顶部或底部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery判断滚动条滚到页面底部脚本
原文地址 http://www.111cn.net/wy/jquery/61741.htm
- jquery判断滚动条到底
$(document).scroll(function(){ var dHeight = $(document).height(); var wHeight = $(window).height(); ...
- JQuery 判断滚动条是否到底部
BottomJumpPage: function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).he ...
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery判断页面滚动条(scroll)是上滚还是下滚
单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...
- jquery判断div滚动条到底部
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...
随机推荐
- codevs1069关押罪犯(并查集)
题目描述 Description S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极 不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨 ...
- 如何对Javascript代码进行二次压缩(混淆)
如何对Javascript代码进行二次压缩(混淆) 对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间.但是,不是所有的变量(方法)都能被混淆的,一般来说,只有非属性的变量(方法) ...
- Mysql之Windows初探
准备工作 防止原先mysql残留,DOS模式下删除mysql服务 sc delete mysql 或者 进入mysql目录下子目录bin卸载mysql服务 mysqld --remove mysql ...
- 使用python之环境管理
情景1:不同python版本的管理 同一电脑上的多个python版本之前的管理,为了突出问题的普遍存在,下面是有人在segmentfault上提的问题. 摘自:http://segmentfaul ...
- 给Cygwin重新安装curl
之前已经安装过了cygwin了,但是重装了系统了. 不过发现cygwin倒是还可以继续使用. 现在想要使用其中的curl工具. 但是却在cygwin安装目录 E:\dev_install_root\c ...
- jquery.ajax异步发送请求的简单测试
使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...
- liunx环境C、C++代码编译链接中间代码主要流程
一个比较小的问题,可以直接看帖子: http://blog.csdn.net/gengyichao/article/details/6544266
- FormsCookieName保存登录用户名的使用
一,写一个类来实现 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...
- ES 6 : let与const
1.let命令 [ 基本用法 ] let命令的用法与var类似,用于声明一个变量,但是let声明的变量只能在let所在的代码块内有效: 上述代码块中使用let和var声明了两个变量.然后在代码块之外调 ...
- js简单固定table表头及css问题分析。
<head> <meta name="viewport" content="width=device-width" /> <tit ...