最近在开发时,遇到一个理论与实践不相符的问题:明明 div 可以滚动,偏偏获取不到它的 scrollTop。
功能:
1.“返回顶部”按钮默认隐藏;
2.当页面往下滚动到 200px 以后时,“返回顶部”按钮出现。
3.当点击“返回顶部”按钮时,页面滚动到顶部。
草图:
思路:
1.一开始让“返回顶部”按钮隐藏,监听 div 滚动事件,到达指定高度后,让按钮出现。
2.“返回顶部”按钮监听点击事件,点击后,回到 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; }
页面逻辑:
- 1.开始犯错
const dom = document.getElementsByClassName('container')[0]; dom.addEventListener('scroll', function () { console.log('scrollTop: ', this.scrollTop); }) console.log(dom.scrollTop); // 0
按照上面的写法,始终没有监听到 div 的滚动事件,打印的 scrollTop 也只有一个 0。
- 2.明明页面可以滚动,怎么监听不到事件呢?
- 3.哦!
div.container
根本不能滚动,能滚动的是设置了overflow: auto;
的 app 元素! - 4.监听 app 元素的滚动事件试一试:
const app = document.getElementById('app'); app.addEventListener('scroll', function () { console.log('scrollTop: ', this.scrollTop); })
成功了,控制台里有数据记录。
- 5.接下来根据设计思路,编写正确的代码就行:
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) 钩子触发时,将一些事件监听器移除,以免对其他组件造成影响。)