Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

Recently updated articles:

  • Waterfall flow, it’s so easy
  • Four common ajax cross-domain solutions (easy to understand)
  • JS static type detection, there is an internal smell

The following text:

introduce

The scrollIntoView() method for DOM elements is a native JS API, also supported by IE6, that lets the element enter the viewport by triggering the location of the scrolling container.

grammar

element.scrollIntoView(); // Equivalent to element.scrollinToView (true)
element.scrollIntoView(boolean); Boolean arguments,true or false
element.scrollIntoView(options); // Object parameters
Copy the code

When the argument is Boolean:

  • If true, the top of the element is aligned with the top of the visible area of the scroll area in which it is located. Corresponding options: {block:”start”,inline:”nearest”}

  • If false, the bottom of the element is aligned with the bottom of the visible area of the scroll area in which it is located. Corresponding options: {block:”end”,inline:”nearest”}

When the parameter is an options object, the attributes are:

  • Behavior: Defines the animation transition effect, one of “auto” or “smooth “. The default is “auto”.

  • Block: Defines vertical alignment, one of “start”, “Center “, “end”, or “nearest”. The default is “start”.

  • Inline: Defines the horizontal alignment of one of “start”, “Center “, “end”, or “nearest”. The default is “nearest”.

PS: CSS smooth scrolling:

.box {
    scroll-behavior: smooth; 
}
Copy the code

Reference documentation

www.zhangxinxu.com/wordpress/2…

Original is not easy, if you feel helpful, also welcome to like, share, add collection!

It is said that those who give a “like” will be promoted and get a raise a month later, marry bai Fumei and walk on the peak of life ~