Original link: http://www.cnblogs.com/xiaohuochai/p/5831640.html#undefined
Scroll width heightScrollHeight
ScrollHeight represents the total height of the element, including the invisible part of the Web page that cannot be displayed due to overflow
ScrollWidth
ScrollWidth represents the total width of the element, including the invisible part of the page that cannot be displayed due to overflow
Note Ie7-The return value of the browser is inaccurate
When "1" does not have a scrollbar, scrollheight is equal to the ClientHeight property result, ScrollWidth is equal to the ClientWidth property result
<div id= "test" style= "width:100px;height:100px;padding:10px;margin:10px;border:1px solid black;" ></div><script>//120 120console.log (test.scrollheight,test.scrollwidth);//120 120console.log ( Test.clientheight,test.clientwidth);</script>
Scroll and Client properties are equal when "2" has a scrollbar, but the element setting is greater than or equal to the content width of the element
<div id= "test" style= "width:100px;height:100px;padding:10px;margin:10px;border:1px solid black;overflow:scroll; font-size:20px;line-height:1; " > content <br> content <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>
"3" has a scrollbar, but the element setting width height is less than the content width of the element, that is, when there is a content overflow condition, the scroll property is greater than the client property
[Note that there are compatibility issues with the]scrollheight property, ScrollHeight contains padding-bottom in Chrome and Safari, and IE and Firefox do not contain padding-bottom
Page size<div id= "test" style= "width:100px;height:100px;padding:10px;margin:10px;border:1px solid black;overflow:scroll; font-size:20px;line-height:200px; " > content </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>
Document.documentElement.clientHeight represents the dimensions of the viewable area of the page, and document.documentElement.scrollHeight represents the actual size of the content of the HTML element. But because each browser behaves differently, it is divided into the following situations
When the "1" HTML element has no ScrollBar, the client and scroll properties of IE and Firefox are always the same and return the dimensions of the viewable area, while Safari and chrome behave normally, clientheight return the viewable area size, and ScrollHeight returns the element content size
Firefox: 755 755//chrome: 947 8 (margin of the BODY element)//safari: 744 8 (margin of the BODY element)//ie: 768 768console.log (Document.documentelement.clientheight,document.documentelement.scrollheight)
Each browser behaves normally when there is a scroll bar in the "2" HTML element. ClientHeight returns the viewable area size, while ScrollHeight returns the element content size
<body style= "height:1000px" ><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>
Compatible
So to get the actual height of the document, get the maximum value of the scrollheight and clientheight of the
Scrolling lengthvar docheight = Math.max (document.documentelement.scrollheight,document.documentelement.clientheight); var docWidth = Math.max (document.documentelement.scrollwidth,document.documentelement.clientwidth);
ScrollTop
The ScrollTop property represents the number of pixels that are hidden above the content area. When an element is not scrolled, the value of ScrollTop is 0, and if the element is scrolled vertically, the value of scrolltop is greater than 0, and the pixel width of the invisible content above the element is represented
ScrollLeft
The ScrollLeft property represents the number of pixels that are hidden to the left of the content area. When an element is not scrolled, the value of ScrollLeft is 0, and if the element is scrolled horizontally, the value of ScrollLeft is greater than 0, and the pixel width of the invisible content to the left of the element is represented
When the scroll bar scrolls to the bottom of the content, the following equation is met
ScrollHeight = = ScrollTop + clientheight
<div id= "test" style= "width:100px;height:100px;padding:10px;margin:10px;border:1px solid black;overflow:scroll; font-size:20px;line-height:200px; " > content </div><button id= ' btn1 ' > click </button><div id= "Result" ></div><script >btn1.onclick = function () { result.innerhtml = ' scrolltop: ' + test.scrolltop+ '; clientheight: ' + Test.clientheight + '; scrollheight: ' + test.scrollheight}</script>Unlike the ScrollHeight and ScrollWidth properties, ScrollLeft and scrolltop are writable
[note] When the scrollleft and scrolltop are assigned negative values, they do not give an error, but silently fail
<div id= "test" style= "width:100px;height:100px;padding:10px;margin:10px;border:1px solid black;overflow:scroll; font-size:20px;line-height:200px; " > content </div><button id= ' btn1 ' > Scroll down </button><button id= ' btn2 ' > scroll up </button> <script>btn1.onclick = function () {test.scrolltop + = 10;} Btn2.onclick = function () {test.scrolltop-= 10;} </script>Theory The scrolling of pages can be reflected and controlled through Document.documentElement.scrollTop and scrollleft, but Chrome and Safari are controlled by Document.body.scrollTop and ScrollLeft.
<body style= "height:1000px" ><button id= ' btn1 ' style= "position:fixed;top:0;" > Click </button><div id= "Result" style= "position:fixed;top:30px;" ></div><script>btn1.onclick = function () { result.innerhtml = ' html scrolltop: ' + Document.documentElement.scrollTop + '; Body scrolltop: ' + document.body.scrollTop;} </script> </body>Therefore, the scrolling height of the page is compatible with the wording
var docscrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop
Back to Top
ScrollTop can be used to get back to the top of the function
function scrolltop () { if ((Document.body.scrollTop | | document.documentElement.scrollTop)! = 0) { Document.body.scrollTop = Document.documentElement.scrollTop = 0; }}<body style= "height:1000px" ><button id= ' btn ' style= "position:fixed" > Back to Top </button><script> function scrolltop () { if ((Document.body.scrollTop | | document.documentElement.scrollTop)! = 0) { Document.body.scrollTop = Document.documentElement.scrollTop = 0; }} Btn.onclick = scrolltop;</script></body>There are also two read-only properties of the window to get the entire page scrolling pixel values, which are pagexoffset and pageYOffset
Pagexoffset
Pagexoffset indicates the pixel value of page scrolling in the horizontal direction
pageYOffset
pageYOffset represents the pixel value of page scrolling in the vertical direction
Note ie8-Browser does not support
<body style= "height:1000px" ><button id= ' btn1 ' style= "position:fixed;top:0;" > Click </button><div id= "Result" style= "position:fixed;top:30px;" ></div><script>btn1.onclick = function () { result.innerhtml = ' pageyoffset: ' + window.pageyoffset;} </script> </body>ScrollTo (x, y)
The ScrollTo (x, Y) method scrolls the document displayed in the current window so that the points specified by coordinates x and y in the document are in the upper-left corner of the display area
<body style= "height:1000px" ><button id= ' btn ' style= "position:fixed" > Scrolling </button><script> Btn.onclick = function () {scrollTo (0,0);} </script>Scrollby (x, y)
The Scrollby (x, Y) method scrolls the document displayed in the current window, and x and y Specify the relative amount of scrolling
<body style= "height:1000px" ><button id= ' btn1 ' style= "position:fixed" > Scroll down </button><button id= ' Btn2 ' style= "position:fixed;top:40px" > Scroll up </button><script>btn1.onclick = function () {Scrollby ( 0,100);} Btn2.onclick = function () {Scrollby (0,-100);} </script>"Small App"
Simple fast Scrolling with Scrollby () plus setinterval timer
<body style= "height:1000px" ><button id= ' btn1 ' style= "position:fixed" > Start rolling </button><button id= ' Btn2 ' style= "position:fixed;top:40px" > Stop scrolling </button><script>var timer = 0;btn1.onclick = function () { timer = setinterval (function () { Scrollby (0,10); },100)}btn2.onclick = function () { clearinterval ( timer); Timer = 0;} </script> scrollIntoView ()
Element.scrollintoview method scrolls the current element into the viewable area of the browser
The method can accept a Boolean value as a parameter. True to indicate that the top of the element is aligned with the top of the visible portion of the current region (provided that the current area is scrollable), or false to indicate that the bottom of the element is aligned with the end of the visible portion of the current region (provided that the current area is scrollable). True if the parameter is not provided
<body style= "height:1000px" ><div id= "test" style= "Height:100px;width:100px;position:absolute;left:0;top : 500px; line-height:1.5!important; " >></div><button id= ' btn1 ' style= "position:fixed" > Scroll to the beginning of the page </button><button id= ' btn2 ' style= "position:fixed;top:40px" > Scroll to end of page </button><script>btn1.onclick = function () { Test.scrollintoview ();}; Btn2.onclick = function () { Test.scrollintoview (false);} </script>Scrollintoviewifneeded ()
The scrollintoviewifneeded (True) method scrolls the browser window or container element and eventually makes it visible only if the current element is not visible in the viewport. If the current element is visible in the viewport, this method does nothing
If the optional aligncenter parameter is set to True, the element is displayed as far as possible in the middle of the viewport (vertical)
[Note] This method is only supported by Chrome and Safari
<body style= "height:1000px" ><div id= "test" style= "Height:100px;width:100px;position:absolute;left:0;top : 500px; line-height:1.5!important; " >></div><button id= ' btn ' style= "position:fixed" > Scroll to the middle of the page </button><script> Btn.onclick = function () { test.scrollintoviewifneeded (true)};</script>Scrollbylines (LineCount)
The Scrollbylines (LineCount) method scrolls the contents of an element by a specified row, and the LineCount value can be positive or negative
[Note] This method is only supported by Safari
<div id= "test" style= "width:100px;height:100px;padding:10px;margin:10px;border:1px solid black;overflow:scroll; font-size:20px;line-height:200px; " > content </div><button id= ' btn1 ' > Scroll down </button><button id= ' btn2 ' > scroll up </button> <script>btn1.onclick = function () {test.scrollbylines (1);} Btn2.onclick = function () {test.scrollbylines (-1);} </script>Scrollbypages (PageCount)
The Scrollbypages (PageCount) method scrolls the contents of an element by the specified height of the page, depending on the height of the element.
[Note] This method is only supported by Safari
<div id= "test" style= "width:100px;height:100px;padding:10px;margin:10px;border:1px solid black;overflow:scroll; font-size:20px;line-height:200px; " > content </div><button id= ' btn1 ' > Scroll down </button><button id= ' btn2 ' > scroll up </button> <script>btn1.onclick = function () {test.scrollbypages (1);} Btn2.onclick = function () {test.scrollbypages (-1);} </script>The scroll event occurs on a Window object, which represents a change in the corresponding element in the page. Of course, the scroll event can also be used on elements with scroll bars.
Note ie8-Browser does not support
<body style= "height:1000px" ><div id= "result" style= "position:fixed;top:10px;" ></div><script>window.onscroll = function () { result.innerhtml = ' page of scrolltop: ' + ( document.documentelement.scrolltop| | DOCUMENT.BODY.SCROLLTOP);} </script> </body>Deep understanding of scrolling scroll
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
