当用户开始自己滚动时，如何防止停止 scrollIntoView？

Question

我有一个导航栏，我使用 scrollIntoView 使活动元素始终位于列表的中央。但是我发现 当用户滚动主要内容时，它会中断/停止 scrollIntoView。它仅在用户没有滚动时才有效。你可以在这个例子中：https://jsfiddle.net/2otv6pyx/ （代码与下面相同。但是示例在 Whosebug 上有一点错误，因为它正在滚动页面）

const first = document.querySelector('#first')
const last = document.querySelector('#last')
let atLast = false
setInterval(() => {
  if (!atLast) {
    last.scrollIntoView({
      block: "end",
      behavior: "smooth"
    })
    atLast = true
  } else {
    first.scrollIntoView({
      block: "end",
      behavior: "smooth"
    })
    atLast = false
  }
}, 1000)

nav {
  position: sticky;
  top: 0;
  background-color: white;
}

nav>ul {
  list-style-type: none;
  display: grid;
  grid-auto-flow: column;
  overflow-x: scroll;
}

nav .active {
  color: red
}

nav li {
  padding-right: 1rem;
}

p {
  line-height: 8rem;
}

<nav>
  <ul>
    <li id="first">Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li id="last">Sulier</li>
  </ul>
</nav>

<main>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
</main>

我希望能够在不停止导航栏动画的情况下滚动主要内容。我怎样才能做到这一点？有没有办法强制 scrollIntoView？

我还注意到，当我向下滚动整个内容时，它首先会向上滚动，而不是水平滚动。

Answer 1

您在代码中遇到的主要问题是 Element.scrollIntoView 方法强制 window 滚动，而实际上您只是想让 ul 元素滚动。

相反，Element.scrollTo 方法是实现您的目标的更好选择。此方法将只滚动指定的元素而不是滚动 window。这允许您在 window 中的其他位置滚动，而不会与 ul 中发生的滚动发生冲突。

因为我们正在使用此方法，所以我们必须指定我们希望元素滚动多远。就像 .scrollIntoView 一样，.scrollTo 接受一个选项对象。对于您的演示，left 选项是修改的重要内容。我们可以只输入 left: 0 滚动到开头，然后输入 left: someBigNumber 滚动到结尾，但是“幻数”并不理想。能够动态决定滚动点很重要。

为了确定所需的 left 值，我调用了每个元素的客户端矩形，并存储了矩形提供的 left 值。不过，这个left的值是从window的角度来看的。为了抵消左值，我找到了 ul 的左值，其中包含 first 和 last 元素，当将值传递给选项时，我减去 ulLeft值。

您可能会注意到滚动效果一直向右，但没有一直向左。这是因为我们无法将最后一个元素滚动到视图的开头，所以它会尽可能停止。滚动不会一直往左，因为我们是滚动到第一里的开头，第一里之前有space。根据所需的效果，您也可以计算这些偏移值。

我在测试时更改了一些其他内容：

分号！在每个语句的末尾添加分号。

我没有使用 setInterval，而是选择了带有 while 循环和 wait 辅助函数的异步函数，因为我觉得它更具可读性。

const first = document.querySelector('li:first-of-type');
const last = document.querySelector('li:last-of-type');
const ul = document.querySelector("ul");

const lastLeft = last.getBoundingClientRect().left;
const firstLeft = first.getBoundingClientRect().left;
const ulLeft = ul.getBoundingClientRect().left;

const wait = () => new Promise(r => setTimeout(r, 2000));

(async () => {
  await wait();
  while(true) {
    ul.scrollTo({
      behavior: "smooth",
      left: lastLeft - ulLeft
    });
    await wait();
    ul.scrollTo({
      behavior: "smooth",
      left: firstLeft - ulLeft
    });
    await wait();
  }
})();

nav {
  position: sticky;
  top: 0;
  background-color: white;
}

nav>ul {
  list-style-type: none;
  display: grid;
  grid-auto-flow: column;
  overflow-x: scroll;
}

nav .active {
  color: red
}

nav li {
  padding-right: 1rem;
}

p {
  line-height: 8rem;
}

<nav>
  <ul>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
  </ul>
</nav>

<main>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
</main>

当用户开始自己滚动时，如何防止停止 scrollIntoView？

How can I prevent stopping scrollIntoView when the user starts to scroll by his own?

html

javascript

css

dom

scroll