0 1 0 6 - 纯真版“页面监听” | 【裸体版94】

不二如是 · 发表于 2017-5-16 07:18:37

购买主题 已有 3 人购买 本主题需向作者支付 3 鱼币 才能浏览

suweixuan1998 · 发表于 2020-2-16 12:24:49

老师在Chrome浏览器中按照您的代码会导致document.body.scrollTop的console值为0；
查了资料发现是DTD的问题。

页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement.scrollTop。

页面没有DTD，即没指定DOCTYPE时，使用document.body.scrollTop。

后来又查了查才知道原来ie狐火都是documentElement，只有谷歌的是body 但是后来谷歌也改了

所以这么写

document.body.scrollTop + document.documentElement.scrollTop;

（以上均是从CSDN查询得出，下面是代码块）

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据页面滚动位置显示浮动框</title>
<style type="text/css">
body{
height: 2222px;
}
#toTop{
position: fixed;
bottom: 100px;
left: 0;
display: none;
}
</style>
</head>
<body>
<h1>我是页面顶端</h1>
<div id="toTop">
<a href="#">返回顶部</a>
</div>
<script>
var toTop=document.getElementById("toTop");
window.onscroll=function () {
//获得鼠标移动距离坐标
console.log(document.body.scrollTop + document.documentElement.scrollTop);
//当页面滚动距离超过500触发，滚动距离可参考上方注释内容
if (document.body.scrollTop + document.documentElement.scrollTop>500)
{toTop.style.display="block";}
else
{toTop.style.display="none";}
};
</script>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 53786 狗仔卡	发表于 2017-5-16 07:18:37 \| 显示全部楼层 \|阅读模式购买主题已有 3 人购买本主题需向作者支付 3 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 34
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 1 0 6 - 纯真版“页面监听” | 【裸体版94】

本帖被以下淘专辑推荐: