封装自己的scroll

最新推荐文章于 2024-06-23 10:15:57 发布

Surpass-oneself

最新推荐文章于 2024-06-23 10:15:57 发布

阅读量191

点赞数

分类专栏： Javascript面向对象

本文链接：https://blog.csdn.net/qq_41882787/article/details/80084821

版权

Javascript面向对象专栏收录该内容

5 篇文章 0 订阅

订阅专栏

由于不同版本的浏览器对于scroll的兼容性的支持不一样，所以我们需要做兼容性的考虑。为了避免每次使用的时候都要做兼容性的考虑。我们封装了scroll的函数。可以引入到样式中。

<!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 3000px;
}
</style>
</head>
<body>

</body>
</html>
<script>
// var json = {left: 10, right: 10} 变异
//json.left json.top
function scroll() {
if(window.pageYOffset != null) // ie9+ 和其他浏览器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 声明的了 DTD
// 检测是不是怪异模式的浏览器 -- 就是没有声明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪异模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
// 使用这个函数
window.onscroll = function() {
console.log(scroll().top);
}
</script>