問題描述
今天在做頁面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個人主頁
- 公眾號：前端隊長
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/250555.html
標籤：其他