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.
<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)
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>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
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( 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>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>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)方法将元素的内容滚动指定的行髙，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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is scroll button?
Feb 22, 2023 pm 02:29 PM
scroll is the scroll lock key, a function key on a computer keyboard. The scroll key is commonly used in word and Excel. When Scroll Lock is turned off and the page turning key is used, the selected area of cells will move; but when the Scroll Lock key is pressed, the selected area will not move. of cells.
What does the keyboard scroll light mean?
Feb 20, 2023 pm 01:42 PM
The keyboard scroll light on means that the "Scroll Lock" is enabled; the Scroll Lock key is not used in the win system, but some software will use this function key. After pressing this key, the Excel up and down keys will lock when scrolling. The cursor scrolls the page; if you release this key, pressing the up and down keys will scroll the cursor without scrolling the page.
How to understand scroll
May 23, 2023 pm 01:40 PM
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 web page due to overflow [Note] IE7-Browser The return value is inaccurate [1] When there is no scroll bar, the scrollHeight and clientHeight attributes are equal, and the scrollWidth and clientWidth attributes are equal //120120console.log(test.scrollHeight,test.s
How to use v-on:scroll to listen for scrolling events in Vue
Jun 11, 2023 pm 12:14 PM
Vue is one of the more popular front-end frameworks currently. In addition to common event monitoring, Vue also provides an instruction for monitoring scroll events, namely v-on:scroll. This article will introduce in detail how to use v-on:scroll to listen for scroll events in Vue. 1. Basic usage of v-on:scroll instruction The v-on:scroll instruction is used to monitor the scrolling events of DOM elements. Its basic usage is as follows: <divv-on:scroll="sc
How to hide scroll in css
Jan 28, 2023 pm 02:02 PM
How to hide scroll in CSS: 1. In Firefox, you can hide the scroll bar through the "scrollbar-width: none; /* Firefox */" attribute; 2. In IE browser, you can use the "-ms-prefix" attribute Define the scroll bar style; 3. In Chrome and Safari, you can use the CSS scroll bar selector and then hide it through "display:none".
What is Ethereum scroll? How to operate Ethereum scroll?
Feb 15, 2025 pm 10:33 PM
Ethereum Scroll is a layer 2 scaling solution designed to improve the scalability of the Ethereum network through sharding and ZK-Rollup technologies. It combines these two technologies to process transactions in parallel and verify efficiently, thereby significantly improving network throughput and reducing transaction fees. Scroll is designed to be a compatible extension layer for Ethereum Virtual Machines (EVMs), allowing users to process transactions quickly and economically.
Scroll (SCR) Pre-Market Futures Plunge to Record Low of $1.18 Ahead of Oct. 19 Airdrop
Oct 12, 2024 am 12:34 AM
Scroll, the fast-growing zero-knowledge layer-2 network, confirmed that it would launch its airdrop on Oct. 19.
Scroll (SCR) Token Launch: A Step Towards Decentralization
Oct 11, 2024 pm 10:18 PM
The token launch comes as Scroll aims to enhance its governance and solidify its role as a key player in the Ethereum ecosystem.
