element.scrollTop 在设置非常大的值时跨浏览器具有不同的行为答案

【问题标题】：element.scrollTop has different behavior across browsers while setting a very large valueelement.scrollTop 在设置非常大的值时跨浏览器具有不同的行为
【发布时间】：2018-10-18 01:01:30
【问题描述】：

我想滚动到底部而不触发布局/重排。

所以我尝试将一个固定的大数字（Number.MAX_SAFE_INTEGER 或 1000000000000000）设置为 scrollTop，这导致跨浏览器的行为不同：

Firefox(59.02)/Safari(11.1)：滚动到顶部
Chrome(66.0.3359.139)：滚动到底部

这是Example。

这是一个错误还是我出了什么问题...？

【问题讨论】：

标签： javascript html

【解决方案1】：

相反，您可以尝试使用 scrollTop 到页面的计算高度。它更简单直接。要遵循的步骤 1.查找文档/任意容器div的高度

var containerHeight= $("#box").height();

scrollTop 和 containerHeight。

document.querySelector('#box').scrollTop = containerHeight;

这肯定适用于任何不匹配的行为。

【讨论】：

就我而言，我不想在循环中访问高度，因为我的 DOM 每次循环都很脏。这将每次触发回流/布局。所以我试着给它一个固定的数字。
给出一个固定的数字不是一个正确的想法/解决方案，特别是如果它是响应式的。

【解决方案2】：

这可能是由于浏览器中元素的最大值不同造成的。例如，在 Chrome 中，限制是 33554428px。此处提供了完整列表：What's the maximum pixel value of CSS width and height properties?

【讨论】：