为什么元素的 scrollTop 一直为 0?
最近在开发时,遇到一个理论与实践不相符的问题:明明 div 可以滚动,偏偏获取不到它的 scrollTop。
功能:
- “返回顶部”按钮默认隐藏;
- 当页面往下滚动到 200px 以后时,“返回顶部”按钮出现。
- 当点击“返回顶部”按钮时,页面滚动到顶部。
草图:
思路:
- 一开始让“返回顶部”按钮隐藏,监听 div 滚动事件,到达指定高度后,让按钮出现。
- “返回顶部”按钮监听点击事件,点击后,回到 div 顶部即可。
本来是 Vue 代码,懒得启动脚手架,直接写原生演示。
页面结构: 可以根据 Vue 单页面想象一下,最外层是元素 app,中间的 container 是某路由渲染的模块内容。
<body>
<div id="app">
<div class="container">
<h1>app 某模块</h1>
<h2>模块总高度:2000px</h2>
<p>当前滚动的高度:<span class="current-scrollTop">0</span> px</p>
<a class="back-top hide" href="javascript:;">返回顶部</a>
</div>
</div>
</body>
页面样式:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
overflow: hidden;
}
#app {
height: 100%;
border: 5px dashed red;
overflow: auto;
}
#app>.container {
height: 2000px;
margin: 0 auto;
background-color: #abcdef;
}
#app>.container>h1,
#app>.container>h2,
#app>.container>p {
text-align: center;
}
#app>.container>p {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 700;
}
/* 按钮 */
a.back-top {
position: fixed;
right: 50px;
bottom: 50px;
display: inline-block;
padding: 10px;
text-decoration: none;
border: 2px solid #000;
}
/* 控制按钮隐藏 */
a.back-top.hide {
display: none;
}
页面逻辑:
- 开始犯错
const dom = document.getElementsByClassName('container')[0];
dom.addEventListener('scroll', function () {
console.log('scrollTop: ', this.scrollTop);
})
console.log(dom.scrollTop); // 0
按照上面的写法,始终没有监听到 div 的滚动事件,打印的 scrollTop 也只有一个 0。
- 明明页面可以滚动,怎么监听不到事件呢?
- 哦!
div.container
根本不能滚动,能滚动的是设置了overflow: auto;
的 app 元素! - 监听 app 元素的滚动事件试一试:
const app = document.getElementById('app');
app.addEventListener('scroll', function () {
console.log('scrollTop: ', this.scrollTop);
})
成功了,控制台里有数据记录。
- 接下来根据设计思路,编写正确的代码就行:
const app = document.getElementById('app');
const dom = document.getElementsByClassName('container')[0];
const btn = document.getElementsByClassName('back-top')[0];
const text = document.getElementsByClassName('current-scrollTop')[0];
app.addEventListener('scroll', function () {
text.innerText = this.scrollTop;
if (this.scrollTop > 200) {
btn.classList.remove('hide');
} else {
btn.classList.add('hide');
}
})
btn.addEventListener('click', function () {
if (app.scrollTop > 200) {
app.scrollTo({
top: 0,
behavior: 'smooth'
})
}
})
没错,真相就在这里:由于给 html、body 设置了 overflow: hidden;
属性,视觉上,让我误以为滚动条是 div.container
的,实际上是 #app
的。(当然,Vue 里的代码最好在 unmounted(destroyed) 钩子触发时,将一些事件监听器移除,以免对其他组件造成影响。)
添加我的微信:enjoy_Mr_cat,共同成长,卷卷群里等你 🤪。