扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
$(document).scrollTop()
10年积累的网站制作、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有阆中免费网站建设让你可以放心的选择与我们合作。
获取垂直滚动的距离
即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft()
这是获取水平滚动条的距离
看明白了吗??
你要获取顶端
只需要获取到scrollTop()==0的时候
就是顶端了
要获取底端
只要获取scrollTop()=$(document).height()-$(window).height()
就可以知道已经滚动到底端了
$(document).height()
//是获取整个页面的高度
$(window).height()
//是获取当前
也就是你浏览器所能看到的页面的那部分的高度
这个大小在你缩放浏览器窗口大小时
会改变
与document是不一样的
根据英文应该也能理解吧
其实你可以自己做个实验就知道了
$(document).scroll(function(){
$("#lb").text($(document).scrollTop());
})
span
id="lb"
style="top:100px;left:100px;position:fixed;"/span!--一个固定的span标记
滚动时方便查看--
判断DIV是否滚动到底部代码如下:
!DOCTYPE html
html
head
script src=""/script
script language="javascript"
$(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("滚动条到底部了");
});
});
/script
div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;"
div style="height:750px;"
/div
/div
/body
/html
首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。
clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。
offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。
scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度。
举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到底,显示出列表最下面的部分,此时,scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。
理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。
首先,我们拉动滚动条,从最上面拉到最下面,变化的是scrollTop的值,而这个值是有一个区间的。
这个区间是:[0, (offsetHeight - clientHeight)]
即,滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。
1、判断滚动条滚动到最底端:scrollTop == (offsetHeight – clientHeight)
2、在滚动条距离底端50px以内:(offsetHeight – clientHeight) – scrollTop = 50
3、在滚动条距离底端5%以内:scrollTop / (offsetHeight – clientHeight) = 0.95
如上。
如果要实现拉到底部自动加载内容。只要注册个滚动条事件:
[javascript] view plain copy
在CODE上查看代码片派生到我的代码片
scrollBottomTest =function(){
$("#contain").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可见高度
contentH =$(this).get(0).scrollHeight,//内容高度
scrollTop =$(this).scrollTop();//滚动高度
//if(contentH - viewH - scrollTop = 100) { //到达底部100px时,加载新内容
if(scrollTop/(contentH -viewH)=0.95){ //到达底部100px时,加载新内容
// 这里加载数据..
}
});
}
jquery让滚动条滚动到最底部的方法:
在ready方法里写 $('#content').scrollTop( $('#content')[0].scrollHeight );
给你个思路:
1、获取滚动事件;
2、判断隐藏掉的第一个tr与它所在的索引;
3、计算第一个隐藏的tr离窗口顶部的距离;
4、当计算到的距离小于某个值(PS:此值自定义)时显示此隐藏tr及其后的另外两个tr
具体实现:
$(function(){
$("table tr:gt(2)").hide();
$(window).scroll(function(){
var firstHideTr = $("tr:hidden:first"); //隐藏掉的表格第一行
var index = $("table tr").index(firstHideTr); //判断隐藏掉的表格第一行所在的索引值
if(firstHideTr.length0 ((firstHideTr.prev("tr").offset().top-$(window).scrollTop())300)){//此值300为自定义,根据实际情况而定
for(var i=0;i3;i++){//3为滚动时显示的行数,可根据实际去定义
$("table tr").eq(index+i).show()
}
}
});
});
使用如下代码可让滚动条默认在最底部:
$(document).ready(function(){
$("#submit").click(function(){
$("#info").append("admin:"+$("#talk").val()+"\n");
$("#info").scrollTop($("#info")[0].scrollHeight);
$("#talk").val("");
});
});
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。
1、可见高度:viewHeight,可以理解为打开见浏览器空白页见到的空白区域的高度。
2、内容高度:containHeight,这个就是我们关心的高度,它是内容的总高度,包括隐藏在滚动条下面的内容。
3、滚动的高度:scrollHeight,这个是滚动的高度,它是滚动条滚动了多少的意思。
代码解说:
nScrollTop + nDivHight = nScrollHight。
程序中,在外部div的scroll(滚动)事件中侦测和执行if判断语句,是非常消耗CPU资源的。用鼠标拖拉滚动条,只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头,事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使用。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流