利用jquery怎样获取滚动条正在滚动的数据

利用jquery怎样获取滚动条正在滚动的数据,第1张

$(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("滚动条到底部了");
});
});

height()
-获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。
-css('height') 和 height()之间的区别是后者返回一个没有单位的数值,前者是返回带有完整单位的字符串。当一个元素的高度需要数学计算的时候推荐使用height() 方法
-这个方法同样能计算出window和document的高度。
$(window)height(); // returns height of browser viewport
$(document)height(); // returns height of HTML document
注意:在绝对定位和给定display:block时,虽然style和script标签用width() 或 height()也将报告一个值,强烈建议不要在这些标签中调用这些方法。这是一种不好的做法,结果也证明是不可靠的。
innerHeight()
-为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。
-这个方法返回元素的高度,包括顶部和底部的padding,单位是像素。
-这个方法不适用于window and document对象,可以使用height()代替。
outerHeight()
-获取元素集合中第一个元素的当前计算高度值,包括padding,border和选择性的margin。返回一个整数(不包含“px”)表示的值 ,或如果在一个空集合上调用该方法,则会返回 null。
-outerHeight( [includeMargin ] ):include是一个布尔值,表明是否在计算时包含元素的margin值。
-这个方法不适用于window 和 document对象,可以使用height()代替。

jquery获取html元素的高度使用height()方法即可。
定义和用法:
height() 方法返回或设置匹配元素的高度。
返回高度:
返回第一个匹配元素的高度。
如果不为该方法设置参数,则返回以像素计的匹配元素的高度。
语法:
$(selector)height(length)
例如:
$("btn1")click(function(){
alert($("p")height());
});
设置高度:
设置所有匹配元素的高度。
语法:
$(selector)height(length)
例如:
$("btn1")click(function(){
$("p")height(50);
});

var wh=$(window)height();
$(window)scroll(function(){
var s=wh-$(window)scrollTop();
if(s<800){
alert("小于800了")
}
});

<div style="max-height:500px;overflow:auto"></div>
max-height是最大高度,除了ie6不支持,需要使用js外,其他ie7+,ff,chrome都支持,符合你的要求
也可以用纯js
<div id="test" style="overflow:auto"></div>
<script>
var 最大高度 = 300;
function a(){
if($('#test')[0]offsetHeight > 最大高度) $('#test')height(最大高度);
}//你怎么调用a()就看你的了
</script>

前置条件:

div作为盒子限制高度,并设置overflow:auto。在内容超溢出时会出现滚动条(默认Y轴)

实现滚动条滚动到指定位置有两种情况:无效果 和 有动画效果

(1)无效果--直接使用scrollTop方法

//100为高度,单位px
$('box')scrollTop(100)

(2)有效果--使用animate方法

//100为高度,单位px;300为时间,单位ms
$('box')animate({scrollTop:100},300)


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/10547060.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-09
下一篇 2023-05-09

发表评论

登录后才能评论

评论列表(0条)

保存