为什么元素的 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）钩子触发时，将一些事件监听器移除，以免对其他组件造成影响。）

添加我的微信：with_his_x，共同成长，卷卷群里等你 🤪。