scrollIntoView()方法致使整個頁面產生偏移

問題描述

今天在作頁面UI改版的時候發現，我以前使用的是dom.scrollIntoView(); 使得點擊右側題目編號的時候，讓左側題目滾動到頁面可視區域。

若是不知道 scrollIntoView 若是使用，我有篇文章專門寫了 scrollIntoView 的簡單使用：scrollIntoView() 讓元素進入可視區域 · Issue #167

可是如今有個問題就是，當點擊題目編號的時候，除了題目會滾動到可視區域，整個頁面也會稍稍往上滾動，致使頁面錯位。

以下圖所示，當我點擊第9題的時候，左側第9題移動到視口中，可是整個頁面包括導航欄都往上移動了，且沒法在移回來，整個頁面是沒有滾動條的。

問題分析

這個時候惟一的可能就是scrollIntoView()函數引發的問題。

我以前懷疑是否是該函數給整個頁面加了transform 屬性致使整個頁面往上偏移，經過查看css，發現沒有。

沒有想到辦法。只能藉助搜索引擎了，因而我在Stack Overflow 上面找到了一篇文章：

javascript - ScrollIntoView() causing the whole page to move

說的正好是這種狀況。

最高贊給出的解決方法是：放棄使用scrollIntoView 改用scrollTop 來操做滾動條。

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

offsetTop：元素上外邊框距離父元素上內邊框的距離（簡單來講就是元素相對父元素上邊的距離）

這段代碼好理解，就是當前須要顯示的元素距離父元素頂部的距離，也就是滾動條滾動的高度。

這段代碼執行後，就可讓該元素到達父元素頂部的位置。

注意事項：offsetTop 不必定是相對於父元素的，若是有不少父元素的話，它是相對於第一個定位的父元素的。

若是第一個父元素未定位（相對relative、絕對absolute或固定fixed），則可能須要將第二行更改成：

target.parentNode.scrollTop = target.offsetTop- target.parentNode.offsetTop;

參考 offset 相關屬性：Web/06-一文搞懂DOM相關距離問題

解決方法

代碼以下，加上動畫：

var target = document.getElementById("target");

$(target).animate({"scrollTop": target.offsetTop }, 'normal');

這是使用 jQuery 的animate 動畫函數。

animate 函數使用方法：https://jquery.cuishifeng.cn/animate.html

若是不使用 jQuery 的話，因爲scrollTop 是js屬性，不是css屬性，因此不能使用transition 來設置動畫。動畫效果要本身寫嘍。

下面是一個參考例子：javascript - scrollTop animation without jquery

相關問題

相似的問題和解決方法以下連接：

• scrollintoview-moves-the-whole-page-layout-up
• scrollintoview-whole-page-shifting-down

（完）

原文首發地址：https://github.com/Daotin/fe-blog/issues/

你也能夠從下面地方找到我：

• Github我的主頁
• 公衆號：前端隊長