scrollTop overflow: scroll

scrollTop 是一个 DOM 元素的属性，它用于获取或设置元素的垂直滚动条滚动的距离。例如，可以通过 `element.scrollTop` 获取元素 `element` 的垂直滚动条滚动的距离。

overflow: scroll 是一个 CSS 属性，它用于指定元素内容溢出时如何处理。当设置为 scroll 时，如果元素内容溢出，则会显示滚动条，用户可以通过滚动条滚动来查看元素内容的其余部分。如果设置为 auto，则只在内容溢出时显示滚动条。

这两个属性通常一起使用，以实现元素内容的滚动效果。

相关问题

用overflow: scroll后 scrollTop一直为0

当使用 `overflow: scroll` 属性时，需要注意以下几点：

1. 容器元素必须有固定的高度或最大高度。否则，元素将会根据其内容自动调整高度，即使超出了容器的高度范围，也不会出现滚动条。

2. `scrollTop` 属性只有在容器元素的内容高度超过其容器高度时才会生效。如果内容高度没有超过容器高度，则 `scrollTop` 始终为0。

3. 当容器元素的 `overflow` 属性设置为 `scroll` 时，滚动条会一直显示，即使内容没有超出容器的高度范围。

因此，如果你发现 `scrollTop` 属性始终为0，可能是因为容器元素没有固定的高度或最大高度，或者容器元素的内容没有超过其容器高度。你可以检查一下这些问题，并相应地调整你的代码。

移动端设置overflow:scroll后scrollTop失效并一直为0

在移动端，如果你想要使用 `overflow:scroll` 实现滚动条功能，需要同时设置元素的高度，并保证元素内部有足够多的内容超出元素高度，才能正确响应 `scrollTop` 属性。否则，`scrollTop` 属性会一直为0，无法实现滚动效果。

同时，为了兼容不同移动设备，建议使用 `-webkit-overflow-scrolling: touch;` 来优化滚动性能。完整的样式代码如下所示：

.scrollable {
  height: 200px; /* 设置元素高度 */
  overflow: scroll; /* 开启滚动条 */
  -webkit-overflow-scrolling: touch; /* 优化滚动性能 */
}

另外，如果你的元素内容是动态加载的，需要在加载完成后重新计算元素高度，以确保 `scrollTop` 属性可以正确响应。可以使用以下JS代码实现：

var element = document.getElementById('scrollable-element');
element.addEventListener('load', function() {
  element.style.height = element.scrollHeight + 'px';
});