无法使用 window.scrollTo 滚动到页面末尾

Question

我无法一直滚动到最后。以下代码在页面末尾附近停止工作。

我使用以下方法以编程方式滚动，

// 1 still see scrolling left
window.scrollTo(x,y) > window.scrollTo(window.scrollWidth,0)
window.scrollBy(x,y) >
// 2
scrollingElement.scrollLeft = scrollingElement.scrollWidth - document.documentElement.clientWidth;

信息：

对于我的情况，一些与宽度相关的信息，

window.scrollWidth > 6180
scrollingElement.scrollWidth > 6183
document.documentElement.clientWidth > 412

注意：我使用了webkitColumnGapcss 并将垂直页面变成了水平页面。这就是为什么我有更大的scrollWidth.

如果我使用以下（完整滚动），我仍然看到，有一些向左滚动，我可以使用鼠标滚动该部分，

window.scrollTo(window.scrollWidth,0) // go to end
scrollingElement.scrollLeft = <full width> // go to end

// log scroll position for inpection ~ this number does not match the full width
window.scrollX ~ 4k
(window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0) ~ 4k

我的想法已经用完了，所以需要你们的帮助来找出问题所在。

浏览器详情：

我Webview在 android 设备中使用颤振。

编辑：

经过大量的试验和错误添加以下 css 解决了这个问题，我不知道为什么会解决这个问题？

body {
  overflow: hidden !important;
}

谢谢。

Answer 1

经过大量尝试和错误后，添加以下 css 解决了问题，我不明白为什么会解决这个问题？

body {
    overflow: hidden !important;
}

这意味着您的某些子元素会从其父容器中流出。overflow: hidden告诉浏览器剪掉不适合主体容器的部分。这也意味着这个问题可以通过改变身体孩子的大小或位置来解决，这可能是解决这个问题的更好方法。

默认情况下，overflow设置为visible，因此浏览器允许您查看（并滚动）包含框之外的内容（溢出属性已解释）

该!important部分告诉浏览器人为地增加此规则的特殊性。有关特异性的更多详细信息：css-tricks/sprecificity