同时设置 scrollLeft 和 scrollTop答案

【问题标题】：Set scrollLeft and scrollTop simultaneously同时设置 scrollLeft 和 scrollTop
【发布时间】：2011-05-17 18:02:53
【问题描述】：

有什么方法可以同时设置 div 的 scrollLeft 和 scrollTop 吗？在 Chrome、Safari 和 Opera 中，它可以通过按顺序设置它们立即工作，但在 Firefox（早于 4）和 IE（甚至在 IE9 中！）设置其中一个会导致重排，从而导致丑陋的故障，因为页面将首先向左然后向下移动，像楼梯一样。

我看到那个窗口有一个叫scrollTo(x,y)的方法，有没有普通div的等效方法？

或者，是否可以更改浏览器的行为，以便仅在更改滚动时不会触发重排。我发现的一个消息来源说，只有当我在 div 上注册了 onscroll-event 但我没有任何事件时才会发生这种情况，所以这不会是问题。

【问题讨论】：

您可以将焦点设置在该位置的某个元素上，而不是设置 scrollLeft 和 scrollTop - 这样的元素也可以动态创建。
@mercator，这是一个完全不同的问题。 “left”和“width”也有同样的问题：我的动画有时看起来很跳跃，因为我需要同时设置这两个属性，或者至少在两者之间没有重排。
好像确实和这个问题一样，一两周前才问过：stackoverflow.com/questions/4207505/…
@harpo，嗯，你是对的。我认为这个问题的答案会非常相似，但我可能被return false 甩了。我认为滚动事件是可以取消的。
如果你这样做会发生什么： var left=20;变量顶部=100； elem.scrollTop = (elem.scrollLeft = left) - left + top;

标签： javascript html css

【解决方案1】：

您不应该使用 scrollLeft 和 scrollTop，您应该使用 .animate() 设置 scrollLeft 和 scrollTop。

.animate({
    .scrollLeft: x,
    .scrollTop: y
})

还有几个从http://plugins.jquery.com/project/ScrollTo 构建的插件来简化流程。

【讨论】：

【解决方案2】：

我认为动画将是最好的方法（大多数 JavaScript 框架都会这样做），但你也可以试试这个：

setTimeout("verticalScrollFunction", 1);
setTimeout("horizontalScrollfunction", 1);

【讨论】：

【解决方案3】：

我刚才也遇到了同样的问题。我发现动画建议并不好（跳跃，滞后，最终更糟），但附带的提供的 jQuery 插件至少稍微好一点。对我来说，它所需要的开销并不值得微小的收益。

在我的情况下，我有一个可滚动的 div，里面有一张大图。该图像越大，回流越差。通过在设置滚动属性之前立即隐藏 div，然后立即再次显示，我能够极大地改善这种情况。这允许 IE 在设置第一个属性后忽略重新呈现内容，而是等到元素再次“可见”（在它们都设置后）。

在任何主流浏览器的任何当前版本中似乎都没有任何闪烁（这是我首先关心的问题）。在 Firefox 4、Opera 11、Chrome 10、IE 8、IE8 兼容性和 Safari 5 中测试。

在 jQuery 中：

var my_pane = $('#my_scroll_pane');
my_pane.css( 'visibility', 'hidden' );
my_pane.scrollTop( 100 ).scrollLeft( 100 );
my_pane.css( 'visibility', 'visible' );

正则 ole' JavaScript：

var scroll_pane = document.getElementById('my_scroll_pane');
scroll_pane.style.visibility = 'hidden';
scroll_pane.scrollTop = 100;
scroll_pane.scrollLeft = 100;
scroll_pane.style.visibility = 'visible';

更新：这在 FF3.6 中确实会大致闪烁。如果有人有任何不涉及浏览器嗅探的想法，欢迎提出任何意见。

【讨论】：

【解决方案4】：

使用绝对定位或负边距而不是滚动。

【讨论】：

【解决方案5】：

你也许可以使用Object.assign:

const {scrollLeft, scrollTop} = computeGoodScrollPosition(myDiv);
Object.assign(myDiv, {
  scrollLeft,
  scrollTop
});

【讨论】：