Introduce the scrollintoview() method attribute in detail

Hello everyone , I meet you again , I'm your friend, Quan Jun .

Because the anchor point setting is used in the work , Common ones always go wrong , Later, I pulled out this attribute , Studied in detail for future use

Introduce scrollIntoView（） Detailed properties of

brief introduction

The scrollIntoView() Method scrolls the element calling it to the visible area of the browser window .

---

PS： According to the layout of other elements , Elements may not scroll completely to the top or bottom .

TIPS： page （ Containers ） Useful when scrollable ！

grammar

element.scrollIntoView（）; //  Equate to element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; // Boolean parameters 
element.scrollIntoView（scrollIntoViewOptions）; // Object parameters 

Copy

Syntax parameters

alignToTop	[ Optional ], At present, this parameter has been well supported
true	The top of the element will be aligned to the top of the visible area of the scrollable ancestor . Corresponding to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default
false	The bottom of the element will align with the bottom of the visible area of the scrollable ancestor . Corresponding to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

scrollIntoViewOptions	[ Optional ], At present, this parameter browser does not support it well , You can view the compatibility details below
behavior	[ Optional ] Define transition animation ."auto","instant" or "smooth". The default is "auto".
block	[ Optional ] "start","center","end" or "nearest". The default is "center".
inline	[ Optional ] "start","center","end" or "nearest". The default is "nearest".

Example

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

Copy

Application scenarios

URL in hash Evolution of markers

• The chat window scrolls through the latest messages
• Add to a list item Scroll back to show the latest added item
• Back to the top (#)
• Scroll to the specified position (#xxx)

Browser compatibility

features	Chrome	Firefox	Safari	Edge	IE	Opera
Basic support ( alignToTop )	yes	yes	yes	yes	yes	yes
scrollIntoViewOptions	yes	yes	5.1[1]	12[1]	9[1]	48[2]

Be careful ： I won't support it "smooth" Act or "center" Options .

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/148024.html Link to the original text ：https://javaforall.cn