Usage examples of scrollIntoView

Scrolling of DOM

The DOM specification does not stipulate what kind of scrolling page area each browser needs to implement. Each browser implements corresponding methods and can use different methods to control the scrolling of the page area. These methods exist as extensions of the HTMLElement type, so they can be used on all elements.

1. scrollIntoView(alignWithTop) Scrolls the browser window or container element so that the current element can be seen within the visible range of the current window. If alignWithTop is true, or if it is omitted, the window will scroll as much as possible until the top of itself is flush with the top of the element. ------- Currently, all browsers support

2. scrollIntoViewIfNeeded(alignCenter) only scrolls the browser window or container element when the current element is not visible within the visible range of the window. Finally make the current element visible. If the current element is visible in the viewport, this method does nothing. If the optional parameter alignCenter is set to true, it means that the element will be displayed in the middle of the window (vertical direction) ------Safari and Chrome implement this method

3, scrollByLines(lineCount) The content is scrolled by the specified number of lines. The value of lineCount can be positive or negative. ---Safari and Chrome implement this method

4. scrollByPages(pageCount) scrolls the content of the element to the specified page height. The specific height is determined by the height of the element. ---Safari and Chrome implement this method

scrollIntoView() and scrollIntoVIewIfNeeded() affect the element's window, while scrollByLines() and scrollByPages() affect the element itself. The following is A few examples:

//将页面主体滚动5行
document.body.scrollByLines(5);

/确保当前元素可见
document.getElementById(“test”).scrollIntoView();   //
//true:对象的顶端与当前窗口的顶部对齐
//false:对象的底端与当前窗口的顶部对齐

//确保只在当前元素不可见的情况下才使其可见
document.getElementById(“test”).scrollIntoViewIfNeeded();

//将页面主体往回滚1页
doument.body.scrollByPages(-1);
由于只有scrollIntoView被各浏览器均支持，所以这个方法最为常用

The above is the detailed content of Usage examples of scrollIntoView. For more information, please follow other related articles on the PHP Chinese website!