无法使用 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

我运行没有想法，所以需要你们的帮助来找出问题。

浏览器详细信息：

我在 android 设备中使用 flutter Webview。

编辑：

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

body {
  overflow: hidden !important;
}

谢谢。

Answer 1

您想滚动到底部吗？试试这个：

var height = document.body.scrollHeight
window.scroll(0, height)

希望我正确理解你的问题

Answer 2

After lot of trial and error adding following css fixed the issue, I don't why this fixed it?

body {
    overflow: hidden !important;
}

这意味着您的某些 children 元素从其 parent 容器中流出。 overflow: hidden 告诉浏览器切掉不适合 body 容器的部分。这也意味着可以通过更改 body 的 children 的大小或位置来解决此问题，这可能是解决此问题的更好方法。

默认情况下，overflow 设置为 visible，因此浏览器允许您在包含框 (overflow property explained)

之外查看（并滚动）

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

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

Coudn't scroll to end of the page using window.scrollTo

javascript

css

webview