在前端开发中，我们经常使用 ScrollIntoView() 方法来将指定的元素滚动到可见区域。但是，在某些情况下，该方法可能会导致整个页面滚动，这对于用户体验来说是非常不友好的。
问题分析
当我们调用 ScrollIntoView() 方法时，浏览器会尝试将指定元素滚动到视口中，并且如果该元素已经在视口内，则不会对页面进行任何滚动。但是，如果该元素在视口之外或者只有部分可见时，则浏览器会自动滚动整个页面以确保该元素完全可见。
在一些场景下，我们需要调用 ScrollIntoView() 来获取元素的位置信息，但并不希望页面被滚动。此时，我们可以通过设置 behavior 参数为 "instant" 来强制取消浏览器自动滚动的行为：
element.scrollIntoView({ behavior: "instant" });解决方案
除了上述解决方案，我们还可以通过其他方式来规避 ScrollIntoView() 导致页面滚动的问题。
1. 使用 overflow: auto 样式
如果我们将容器元素的样式设置为 overflow: auto，则容器会出现滚动条，从而避免了页面的滚动：
<div style="overflow: auto;"> <div id="target">需要滚动到的元素</div> </div>
document.getElementById("target").scrollIntoView();2. 计算滚动距离
我们可以通过 JavaScript 计算出当前元素相对于视口的位置，从而手动实现滚动：
-- -------------------- ---- ------- -------- -------------------- - ----- ---- - ---------------------------- ----- --------- - ------------------ -- ----------------------------------- ----- ---------- - ------------------ -- ------------------------------------ ----- --- - -------- - ---------- ----- ---- - --------- - ----------- ----------------- ---- ----- --------- -------- --- - ----- ------ - ---------------------------------- ------------------------
总结
ScrollIntoView() 方法在前端开发中非常常用，但是也容易导致整个页面滚动的问题。为了避免这种情况的发生，我们可以使用上述的解决方案来规避或者手动控制滚动行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28071