javascript element.scrollLeft 不起作用

Question

我正在尝试滑块。

我希望能够滚动到滑块的特定位置，从 MDN 文档看来，我可以使用 element.scrollLeft 滚动到特定位置。

虽然我似乎没有为我工作..


var container = document.getElementById('container');
container.scrollLeft = 150;

window.scrollTo(150, 0) 可以工作，但为什么呢？使用其中一种或另一种有什么区别？谢谢！

Answer 1

您需要在使用scrollLeft时使元素可滚动

在此处查看文档。

它说。

scrollLeft 可以设置为任何整数值，但是：

如果元素无法滚动（例如没有溢出），则将scrollLeft设置为0。

如果设置为小于 0 的值（对于从右到左的元素，则大于 0），scrollLeft 将设置为 0。

如果设置的值大于内容可滚动的最大值，则将scrollLeft设置为最大值。

因此，如果您在 css 中进行以下更改，这将会起作用。

#container {
  white-space: nowrap;
  overflow:scroll;
}

Answer 2

css 属性

scroll-snap-type

也会使某些浏览器看起来忽略

scrollLeft

。您可能认为滚动位置会发生变化，然后以动画方式返回到捕捉的位置，但实际上，当您以编程方式更改滚动位置时，没有动画。无论如何，这对于 Mobile Safari 来说绝对是正确的。