JS如何判断浏览器滚动条的位置 30
3个回答
2014-12-22 · 知道合伙人数码行家
huanglenzhi
知道合伙人数码行家
采纳数：117538
获赞数：517194
长期从事计算机组装，维护，网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。
向TA提问 私信TA
关注
![]()
展开全部
可以这么试一下
在你的页面上某个位置放一个div或者就用你页面上已有的某个元素也行，当用户滚动的时候这个div相对于浏览器的顶部或底部的距离肯定会变化，然后你通过这个距离来判断用户浏览到当前页面的什么位置了。
参考一下，我没试过....
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function a(){
var st = document.documentElement.scrollTop;//滚去的高度
var ch = document.documentElement.clientHeight;//窗口的高度
var at = document.getElementById("a").offsetTop;//元素离页面顶部的高度
var v = ch - (at - st);//元素离窗口底部的高度,为负的话表示元素还在窗口底部下面
alert("距离底部的高度为:"+v);
}
</script>
</head>
<body>
<div>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
<div id="a" style="width:100px;height:1px;background-color: red"></div>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
</div>
</body>
</html>
在你的页面上某个位置放一个div或者就用你页面上已有的某个元素也行，当用户滚动的时候这个div相对于浏览器的顶部或底部的距离肯定会变化，然后你通过这个距离来判断用户浏览到当前页面的什么位置了。
参考一下，我没试过....
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function a(){
var st = document.documentElement.scrollTop;//滚去的高度
var ch = document.documentElement.clientHeight;//窗口的高度
var at = document.getElementById("a").offsetTop;//元素离页面顶部的高度
var v = ch - (at - st);//元素离窗口底部的高度,为负的话表示元素还在窗口底部下面
alert("距离底部的高度为:"+v);
}
</script>
</head>
<body>
<div>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
<div id="a" style="width:100px;height:1px;background-color: red"></div>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/><input type="button" value="test" onclick="a()"/>
</div>
</body>
</html>
追问
貌似不行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
onload=function(){
var changeBG=0,scrollTop=0;
//设置原始变量
setInterval(function(){
scrollTop=document.body.scrollTop
if(changeBG&&scrollTop>200){
//判断是否更换了背景及滚动条是否到达指定高度
document.body.scrollTop=0; //转到页面顶部
document.body.style.backgroundImage="url(...)";
//变换背景
changeBG=1;
//表示已经转换了背景
setTimeout(function(){
document.body.scrollTop=changeBG
//返回原来位置
},1000)
}
},1000)
}
var changeBG=0,scrollTop=0;
//设置原始变量
setInterval(function(){
scrollTop=document.body.scrollTop
if(changeBG&&scrollTop>200){
//判断是否更换了背景及滚动条是否到达指定高度
document.body.scrollTop=0; //转到页面顶部
document.body.style.backgroundImage="url(...)";
//变换背景
changeBG=1;
//表示已经转换了背景
setTimeout(function(){
document.body.scrollTop=changeBG
//返回原来位置
},1000)
}
},1000)
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
// 判断是否滚动到底
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
$(".modal-footer").slideUp(300)
if(scrollTop + windowHeight == scrollHeight){
$(window).unbind("scroll")
$(".modal-footer").slideDown(300)
}
});
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
$(".modal-footer").slideUp(300)
if(scrollTop + windowHeight == scrollHeight){
$(window).unbind("scroll")
$(".modal-footer").slideDown(300)
}
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
