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

【问题标题】：Coudn't scroll to end of the page using window.scrollTo无法使用 window.scrollTo 滚动到页面末尾
【发布时间】：2020-05-12 15:19:47
【问题描述】：

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

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

// 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

注意：我使用了webkitColumnGap css 并将垂直页面变成了水平页面。这就是为什么我有更大的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。

编辑：

经过大量试验和错误添加以下 css 修复了问题，我不知道为什么会修复它？

body {
  overflow: hidden !important;
}

谢谢。

【问题讨论】：

如果没有minimal reproducible example，您的问题将无法回答。在这种情况下，end 的含义也不清楚。您无法滚动到left 端或right 端？如果是left 结尾，则很可能是使用了一些居中技术，其中子级比可用的父级空间更宽。如果它是right 结尾，则可能是内部元素之一上的边距或沿父树某处硬编码宽度的情况。但是，同样，您没有提供足够的技术细节来回答问题。
@tao 我会尝试为这个问题制作 github repo。
您可能想看看 codesanbox.io 提供的内容（基于多文件节点的环境）。他们也有一个“服务器”版本。请记住，您只需要重现错误，而不是整个应用程序。
@tao 我尝试了仅删除段落的裸骨 html 所有 css 它工作正常看起来像我拥有的 html 正在创建某种溢出问题。
那是因为 CSS 的问题。为什么要从 CSS 相关问题中删除所有 CSS？这就像从一级方程式比赛中移除所有引擎。

标签： javascript css webview

【解决方案1】：

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

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

希望我能正确理解你的问题

【讨论】：

我想你错过了我的笔记部分。我正在使用水平滚动 (css: webkitColumnGap) 并且我尝试过完全滚动 scrollTo(6180,0)
好吧，我不明白这样做的目的是什么。但是如果你只是想水平滚动到 100% 右 ``` var width = document.body.scrollWidth window.scroll(width, 0) ``` 或者如果宽度 > 4k 则不滚动的问题？
好的，这有助于我完善我的问题。我在这里说，如果我使用window.scroll(width, 0)，它不会到达终点。我仍然看到向左滚动。并且那个 4k 数字是我滚动到最后之后的日志语句。
如果你在像window.scroll(9999999999999, 0)这样的滚动函数中输入一个疯狂的数字怎么办？
是的，我知道。我做了很多调试，我在这里添加了这些日志和我的尺寸，但你的回答确实帮助我完善了我的问题，所以谢谢。

【解决方案2】：

经过大量试验和错误添加以下 css 修复了问题，我不知道为什么会修复它？

body {
    overflow: hidden !important;
}

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

默认情况下，overflow 设置为 visible，因此浏览器允许您查看（和滚动）包含框之外的 (overflow property explained)

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

【讨论】：