防止scrollIntoView()將容器捲動到頁面頂部

Question

我正在嘗試建立一個簡單的「主要是 css」圖像輪播，它使用滾動捕捉，但也有導航按鈕來控制當前查看的幻燈片。我找到的唯一解決方案是在目標元素上使用scrollIntoView()，它可以滿足我的要求，但它也總是將目標元素滾動到頁面頂部。我希望目標輪播�%B

Answer 1

嘗試將 block: 'nearest' 加入到你的scrollIntoView選項中，如下所示：

document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', event => {
    console.log('event',event);
    slides[event.target.dataset.index].scrollIntoView({
      behavior: 'smooth',
      inline:   'center',
      block:    'nearest',
    });
  });
});