How to understand scroll

Scroll width and height

scrollHeight

scrollHeight represents the total height of the element, including the invisible part that cannot be displayed on the web page due to overflow

scrollWidth

scrollWidth represents the total width of the element, including the invisible part that cannot be displayed on the webpage due to overflow

[Note] IE7-The return value of the browser is inaccurate ’s

　【1】When there is no scroll bar, the scrollHeight and clientHeight attributes are equal, and the scrollWidth and clientWidth attributes are equal.

　【2】When there is a scroll bar, but the width and height of the element are set to be greater than or equal to When the width and height of the element content are equal, the scroll and client attributes are equal Attribute

[Note] There is a compatibility issue with the scrollHeight attribute. In chrome and safari browsers, scrollHeight contains padding-bottom; while IE and firefox do not contain padding-bottom

 内容
内容

Page size

　document.documentElement.clientHeight represents the size of the visible area of the page, while document.documentElement.scrollHeight represents the actual size of the html element content. However, due to the different performance of each browser, it is divided into the following situations

【1】When the html element does not have a scroll bar, the client and scroll attributes of IE and Firefox are always the same, and the size of the visual area is returned. ; Safari and Chrome behave normally, clientHeight returns the size of the visible area, and scrollHeight returns the size of the element content

 内容

[2] When the html element has a scroll bar, all browsers behave normally. clientHeight provides the size of the viewport area, while scrollHeight provides the size of the element content

//firefox: 755 755//chrome: 947 8(body元素的margin)//safari: 744 8(body元素的margin)//IE: 768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)

Therefore, when you want to obtain the actual height of the document, you must obtain < The maximum value of scrollHeight and clientHeight of the html> element

Scroll length

The scrollTop attribute indicates the number of pixels hidden above the content area . When the element is not scrolled, the value of scrollTop is 0. If the element is scrolled vertically, the value of scrollTop is greater than 0 and represents the pixel width of the invisible content above the element

scrollLeft property indicates the number of pixels hidden to the left of the content area. When the element is not scrolled, the value of scrollLeft is 0. If the element is scrolled horizontally, the value of scrollLeft is greater than 0 and represents the pixel width of the invisible content on the left side of the element

When the scroll bar scrolls to the bottom of the content, Conforms to the following equation

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

scrollHeight == scrollTop + clientHeight

Unlike the scrollHeight and scrollWidth properties, scrollLeft and scrollTop are writable

[Note] When assigning negative values to scrollLeft and scrollTop, no error will be reported , but fails silently

 内容
点击

Page scrolling

Theoretically, the scrolling of the page can be reflected and controlled through document.documentElement.scrollTop and scrollLeft; however, chrome and safari browsers use document.body .scrollTop and scrollLeft are controlled by

 内容
向下滚动向上滚动

Therefore, the scroll height compatibility of the page is written as

点击
 

It can be achieved by using scrollTop Back to the top function

var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop

function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){ document.body.scrollTop = document.documentElement.scrollTop = 0; } }

There are two read-only properties of window that can obtain the pixel value of the entire page scrolling, they are pageXOffset and pageYOffset

pageXOffset represents the pixel value of the page scrolling in the horizontal direction

pageYOffset represents the pixel value of the page scrolling in the vertical direction

　[ Note] IE8-browser does not support

 回到顶部  

scrolling method

scrollTo(x,y) method scrolls the current For the document displayed in window, let the point specified by coordinates x and y in the document be located at the upper left corner of the display area

点击
 

scrollBy( The x, y) method scrolls the document displayed in the current window. x and y specify the relative amount of scrolling

滚动

[Small Application]

Use scrollBy() and setInterval timer to achieve simple and fast Scroll function

向下滚动向上滚动

The Element.scrollIntoView method scrolls the current element into the visible area of the browser

This method can accept a Boolean value as parameter. If true, it means that the top of the element is aligned with the top of the visible part of the current area (provided that the current area is scrollable); if it is false, it means that the bottom of the element is aligned with the tail of the visible part of the current area (provided that the current area is scrollable) ). If this parameter is not provided, the default is true

开始滚动停止滚动

The scrollIntoViewIfNeeded(true) method only works when the current element is not visible in the viewport. Scroll the browser window or container element until it becomes visible. If the current element is visible in the viewport, this method does nothing

When the alignCenter parameter is set to true, the element will be displayed in the vertical center of the viewport as much as possible

　[Note ]This method is only supported by chrome and safari

滚动到页面开头滚动到页面结尾

　　scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值

 内容
向下滚动向上滚动

 内容
向下滚动向上滚动

The above is the detailed content of How to understand scroll. For more information, please follow other related articles on the PHP Chinese website!