JS如何判断浏览器滚动条的位置

我需要右则滚动条滚动到距离底部特定距离时,(例如只剩20%时),触发一个function.请问怎样可以判断右则滚动条距离底部的距离.我网上查了很多,都只有距离顶部的,也有... 我需要右则滚动条滚动到距离底部特定距离时,(例如只剩20%时),触发一个function.

请问怎样可以判断右则滚动条距离底部的距离.

我网上查了很多,都只有距离顶部的,也有整条滚动条的长度,但如果要知道距离底部的距离,还需要知道滑块的高度才能相减得到,但我找了很久都没有获取滑块高度的代码

或者有没有其他更好的方法来得知距离底部的距离?????
展开
 我来答
li1987326
2012-04-12
知道答主
回答量:9
采纳率:0%
帮助的人:14.4万
展开全部
可以这么试一下
在你的页面上某个位置放一个div或者就用你页面上已有的某个元素也行,当用户滚动的时候这个div相对于浏览器的顶部或底部的距离肯定会变化,然后你通过这个距离来判断用户浏览到当前页面的什么位置了。

参考一下,我没试过....
追问
那怎样判断那个DIV距离底部的距离...
追答


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);
}

testtesttesttesttesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttesttesttesttest

testtesttesttesttesttesttesttesttesttesttesttest

绿衣人敲门
2015-10-27 · 知道合伙人软件行家
绿衣人敲门
知道合伙人软件行家
采纳数:18765 获赞数:63772
毕业于西北大学计算机网络技术专业,现在在西安电力学院进行网络推广维护工作!

向TA提问 私信TA
展开全部
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)
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
圣鸾OJ
2015-10-07 · TA获得超过1629个赞
知道小有建树答主
回答量:1136
采纳率:96%
帮助的人:110万
展开全部
<!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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式