如何让scrollIntoView不触发整个页面滚动？

当调用列表项的scrollIntoView()方法滚动容器内元素时，常会出现整个页面跟着滚动的问题，即使设置block: "nearest"参数也无法解决。以下是两种可靠的解决方案：

方案1：使用Element.scroll API精准控制容器滚动 #

直接操作列表容器的滚动行为，通过计算目标元素相对于容器的偏移量，仅让容器滚动，完全避免页面联动。

完整代码示例 #

HTML

<ul class="ul">
  <li class="li blue" id="first-li"></li>
  <li class="li green"></li>
  <li class="li red"></li>
  <li class="li orange"></li>
  <li class="li purple" id="last-li"></li>
</ul>
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>

CSS

.ul {
  list-style: none;
  display: flex;
  width: 600px;
  overflow-x: hidden;
}

.li {
  flex-shrink: 0;
  width: 200px;
  height: 300px;
}

.blue { background-color: blue; }
.green { background-color: green; }
.red { background-color: red; }
.orange { background-color: orange; }
.purple { background-color: purple; }

JavaScript

const ul = document.querySelector(".ul");
const firstLi = document.getElementById("first-li");
const lastLi = document.getElementById("last-li");

const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");

prevBtn.addEventListener("click", () => {
  // 计算目标元素相对于容器的左侧偏移量
  const targetOffset = firstLi.offsetLeft;
  ul.scroll({
    left: targetOffset,
    behavior: "smooth"
  });
});

nextBtn.addEventListener("click", () => {
  // 计算滚动到最后一个元素需要的距离：元素左偏移 + 元素宽度 - 容器宽度
  const targetScrollLeft = lastLi.offsetLeft + lastLi.offsetWidth - ul.offsetWidth;
  ul.scroll({
    left: targetScrollLeft,
    behavior: "smooth"
  });
});

方案2：使用scrollIntoView的preventScroll参数（需注意兼容性） #

如果偏好使用scrollIntoView，可以添加preventScroll: true参数阻止页面滚动：

修改后的JavaScript调用代码 #

prevBtn.addEventListener("click", () => {
    firstLi.scrollIntoView({ 
        behavior: "smooth", 
        block: "nearest", 
        inline: "start",
        preventScroll: true // 禁止页面滚动
    })
})

nextBtn.addEventListener("click", () => {
    lastLi.scrollIntoView({ 
        behavior: "smooth", 
        block: "nearest", 
        inline: "start",
        preventScroll: true
    })
})

注意：preventScroll是ES2020新增参数，部分旧浏览器可能不支持，如需兼容旧环境，优先选择方案1。

内容的提问来源于stack exchange，提问作者m_jdm35