The scrollintoview() method causes the entire page to be offset

Time:2021-11-26

Problem description

Today, when I was doing the page UI revision, I found that I useddom.scrollIntoView();Make the title on the left scroll to the visible area of the page when clicking the title number on the right.

If you don’t knowscrollIntoViewIf used, I have an article written specificallyscrollIntoViewSimple use of:Scrollintoview() lets the element enter the visual area · issue #167

But now there is a problem that when you click the title number, in addition to the title scrolling to the visual area, the whole page will scroll up slightly, resulting in page dislocation.

As shown in the figure below, when I click question 9, question 9 on the left moves to the viewport, but the whole page, including the navigation bar, moves upward and cannot be moved back. There is no scroll bar on the whole page.

problem analysis

The only possibility at this time isscrollIntoView()Problems caused by function.

I wondered if the function added to the whole pagetransformProperty causes the entire page to shift upward. By looking at the CSS, it is found that there is no.

I didn’t think of a way. I can only use the search engine, so I found an article on stack overflow:

javascript – ScrollIntoView() causing the whole page to move

That’s exactly the case.

The solution given by the highest praise is to give up usescrollIntoViewchange to the use of sth.scrollTopTo manipulate the scroll bar.

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

offsetTop: the distance between the upper outer border of the element and the upper inner border of the parent element (in short, the distance between the element and the upper edge of the parent element)

This code is easy to understand, that is, the distance between the current element to be displayed and the top of the parent element, that is, the scrolling height of the scroll bar.

After this code is executed, the element can reach the top of the parent element.

Note: offsettop is not necessarily relative to the parent element. If there are many parent elements, it is relative to the first onePositioned parent elementof

If the first parent element is not located (relative)relative, absoluteabsoluteOr fixedfixed), you may need to change the second line to:

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

Refer to offset related attributes:Web / 06 – understand DOM related distance problems

resolvent

The code is as follows, plus Animation:

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

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

This is using jQueryanimateAnimation functions.

animateFunction usage:https://jquery.cuishifeng.cn/animate.html

If jQuery is not used, becausescrollTopIt is a JS attribute, not a CSS attribute, so it cannot be usedtransitionTo animate. The animation effect should be written by yourself.

Here is a reference example:javascript – scrollTop animation without jquery

Related issues

Similar problems and solutions are linked below:

(end)

Original starting address:https://github.com/Daotin/fe-blog/issues/

You can also find me here:

Recommended Today

Vue、Three. JS implementation panorama

1、 First, we need to create a Vue project This paper mainly records the process of building panorama in detail, so building Vue project is not described too much. 2、 Install three js npm install three –save npm install three-trackballcontrols –save npm install three-orbit-controls –save npm i three-obj-mtl-loader –save npm i three-fbx-loader –save npm i […]