This is the 19th day of my participation in the Genwen Challenge

Hi, I’m Daotin, the front end team leader. If you want to learn more about the front end, follow me and unlock the new front end growth posture.

Problem description

When I was doing the UI revision today, I found that I used dom.scrollintoView (); Causes the left topic to scroll to the visible area of the page when clicking on the right topic number.

If you don’t know how to use scrollIntoView, I have an article devoted to the simple use of scrollIntoView: scrollIntoView() lets elements enter the viewable area

One problem is that when you click on the title number, in addition to the title scrolling to the visible area, the entire page also scrolls up slightly, causing the page to misplace.

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

Problem analysis

The only possible problem at this point is the scrollIntoView function.

I wondered if the function had added the transform property to the entire page, causing the entire page to be offset upward.

Didn’t think of a way. Search engines were all I could do, so I found an article on Stack Overflow:

javascript – ScrollIntoView() causing the whole page to move

That’s exactly the case.

The most popular solution is to abandon scrollIntoView and use scrollTop instead.

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

Copy the code

offsetTop: The distance between the outer border of an element and the inner border of its parent element

This code is easy to understand, is the current need to display the distance from the top of the parent element, namely the height of the scroll bar scroll.

Once this code is executed, the element is positioned at the top of the parent element.

Note: offsetTop is not necessarily relative to the parent element, if there are many, it is relative to the first positioned parent element.

If the first parent element is not positioned (relative, absolute, or fixed), you may need to change the second line to:

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

See the article Web/06- to understand the DOM correlation distance problem

The solution

The code is as follows, plus animation:

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

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

Copy the code

This is the animate function using jQuery.

The animate function method of use: jquery. Cuishifeng. Cn/animate. HTM…

If you don’t use jQuery, you can’t use Transition to set animations because scrollTop is a JS property, not a CSS property. I’ll write my own animation.

Here is a reference example: scrollTop Animation without jquery

Issues related to

Similar problems and solutions are linked below:

  • Stackoverflow.com/questions/5…

  • Stackoverflow.com/questions/6…

(after)

Recent hot articles:

  • Waterfall flow, it’s so easy
  • Four common ajax cross-domain solutions (easy to understand)
  • Vue. Js Naming Style Guide (Easy to remember Version)

Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin