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我的主页
• 公众号：前端队长