當用戶開始自己滾動時，如何防止停止scrollIntoView？-有解無憂

我有一個導航欄，我scrollIntoView過去常常在其中將活動元素放在串列的中心。但是我發現當用戶滾動主要內容時，它會中斷/停止 scrollIntoView。它僅在用戶沒有滾動時才有效。你可以在這個例子中：https : //jsfiddle.net/2otv6pyx/ （代碼與下面相同。但是這個例子在stackoverflow上有一點錯誤，因為它正在滾動頁面）

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？

我還注意到當我向下滾動整個內容時，它會首先向上滾動而不是水平滾動。

uj5u.com熱心網友回復：

您在使用代碼時遇到的主要問題是該Element.scrollIntoView方法強制視窗滾動，而實際上您只希望ul元素滾動。

相反，該Element.scrollTo方法是實作目標的更好選擇。此方法只會滾動指定的元素而不是滾動視窗。這允許您在視窗中的其他位置滾動，而不會與ul.

因為我們正在使用這種方法，所以我們必須指定我們希望元素滾動多遠。就像.scrollIntoView,.scrollTo需要一個選項物件。對于您的演示，該left選項是重要的修改內容。我們可以直接進入left: 0滾動到開頭，然后left: someBigNumber滾動到結尾，但是“幻數”并不理想。能夠動態決定滾動點很重要。

為了確定left所需的值，我呼叫了每個元素的客戶端矩形，并存盤了left從矩形提供的值。但是，這個left值是從window. 為了抵消該左值，我找到了ul包含first和last元素的的左值，并將該值傳遞給選項時，我減去該ulLeft值。

您可能會注意到滾動效果一直向右移動，但不會一直向左移動。這是因為我們無法將最后一個元素滾動到視圖的開頭，所以它會盡可能地停止。滾動不會一直向左，因為我們滾動到第一個 li 的開頭，并且第一個 li 之前有空間。根據所需的效果，您也可以計算這些偏移值。

我在測驗時更改的其他一些內容：

分號！在每條陳述句的末尾添加分號。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/370215.html

標籤：javascript html css dom 滚动

上一篇：<spanid="textArea1"></span>可以在DOM中重用嗎？[復制]

下一篇：是否可以使用pyspark在rdd中將值拆分為2個分隔符？