Home > Article > Operation and Maintenance > How to understand scroll
How to understand scroll
- WBOYforward
- 2023-05-23 13:40:321434browse
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.
<div id="test" ></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>
【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
<div id="test" > 内容<br>内容<br></div><script>//103(120-17) 103(120-17)console.log(test.scrollHeight,test.scrollWidth);//103(120-17) 103(120-17)console.log(test.clientHeight,test.clientWidth);</script>
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
<div id="test" > 内容</div><script>//chrome/safari:220(200+10+10)//firefox/IE:210(200+10)console.log(test.scrollHeight);//103(120-17)console.log(test.clientHeight);</script>
[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)Compatible
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
<body ><script>//firefox: 755 1016(1000+8*2)//chrome: 947 1016(1000+8*2)//safari: 744 1016(1000+8*2)//IE: 768 1016(1000+8*2)console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)</script>
Scroll length
scrollTopThe 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
scrollLeftscrollLeft 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
<div id="test" >
内容</div><button id='btn1'>点击</button><div id="result"></div><script>btn1.onclick = function(){
result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}</script>
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
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>
Therefore, the scroll height compatibility of the page is written as
<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'html的scrollTop:' + document.documentElement.scrollTop +';body的scrollTop:' + document.body.scrollTop;
}</script> </body>
Back to the topIt 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
pageXOffsetpageXOffset represents the pixel value of the page scrolling in the horizontal direction
pageYOffsetpageYOffset represents the pixel value of the page scrolling in the vertical direction
[ Note] IE8-browser does not support
<body >
<button id='btn' >回到顶部</button>
<script>function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
btn.onclick = scrollTop;</script>
</body>
scrolling method
scrollTo(x,y)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
<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'pageYOffset:' + window.pageYOffset;
}</script> </body>
scrollBy(x,y)scrollBy( The x, y) method scrolls the document displayed in the current window. x and y specify the relative amount of scrolling
<body ><button id='btn' >滚动</button><script>btn.onclick = function(){scrollTo(0,0);}</script>
[Small Application]
Use scrollBy() and setInterval timer to achieve simple and fast Scroll function
<body ><button id='btn1' >向下滚动</button><button id='btn2' >向上滚动</button><script>btn1.onclick = function(){scrollBy(0,100);}
btn2.onclick = function(){scrollBy(0,-100);}</script>
scrollIntoView()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
<body ><button id='btn1' >开始滚动</button><button id='btn2' >停止滚动</button><script>var timer = 0;
btn1.onclick = function(){
timer = setInterval(function(){
scrollBy(0,10);
},100)}
btn2.onclick = function(){
clearInterval(timer);
timer = 0;
}</script>
scrollIntoViewIfNeeded()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
<body ><div id="test" ></div><button id='btn1' >滚动到页面开头</button><button id='btn2' >滚动到页面结尾</button><script>btn1.onclick = function(){
test.scrollIntoView();
};
btn2.onclick = function(){
test.scrollIntoView(false);
}</script>
scrollByLines(lineCount) scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值 [注意]该方法只有safari支持 scrollByPages(pageCount) scrollByPages(pageCount)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定 [注意]该方法只有safari支持 在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}</script>
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>
滚动事件
<body ><div id="result" ></div><script>window.onscroll = function(){
result.innerHTML = '页面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}</script> </body>
The above is the detailed content of How to understand scroll. For more information, please follow other related articles on the PHP Chinese website!