jquery 判断滚动条到达了底部,怎么判断滚动条是否又到达的顶

发布网友发布时间：2022-04-27 03:52

共4个回答

热心网友时间：2022-04-22 03:19

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.show{
width:360px;height:640px;overflow-x:hidden;overflow-y:auto;margin: 50px auto;border: 2px solid pink;box-sizing: border-box;
}
.show div{
width: 100%;height: 500px;background-color: #E5EECC;font-size:48px;text-align:center;line-height:500px;
}
.show div:nth-child(2n){
background-color: #E8DFC4;
}
</style>
</head>
<body>
<div class="show">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
</div>
<button>判断滚动条位置</button><p></p>
</body>
<script type="text/javascript">
$(function(){
//拉动滚动条的时候判断位置
//$('.show').scroll(function(){
//if( $(this).scrollTop()==0 ){
//$('p').text('滚动条已到达顶部');
//}else if( $(this).scrollTop()+$(this).height() == $(this)[0].scrollHeight ){
//$('p').text('滚动条已到达底部');
//}else{
//$('p').text('');
//}
//});

//直接判断
$('button').click(function(){
if( $('.show').scrollTop()==0 ){
$('p').text('滚动条已到达顶部');
}else if( $('.show').scrollTop()+$('.show').height() == $('.show')[0].scrollHeight ){
$('p').text('滚动条已到达底部');
}else{
$('p').text('');
}
});
});
</script>
</html>

热心网友时间：2022-04-22 04:37

$(".aa").scrollTop()可以获得滚动条距离顶部的位置

热心网友时间：2022-04-22 06:11

$(document).scrollTop() 获取垂直滚动的距离即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(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>

热心网友时间：2022-04-22 08:03

你在文档的滚动事件中判断即可：
$(window).scroll(function(){
checkIt($(document).scrollTop());
})

function checkIt(n){
return n !== 0 ? false : true;
}