Home > Web Front-end > JS Tutorial > body text

Usage examples of scrollIntoView

零下一度
Release: 2017-06-29 14:49:34
Original
2202 people have browsed it

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);
Copy after login

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

//确保只在当前元素不可见的情况下才使其可见
document.getElementById(“test”).scrollIntoViewIfNeeded();
Copy after login
//将页面主体往回滚1页
doument.body.scrollByPages(-1);
由于只有scrollIntoView被各浏览器均支持,所以这个方法最为常用
Copy after login


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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template