Home > Others

Js obtains the height of the scroll bar from the top and bottom of the browser. It is compatible with ie and firefox.

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

For web development, you will often encounter the distance between the browser's scroll bar and the top and bottom, and then perform corresponding processing. The authors will share with you how to use js to obtain the height of the browser's scroll bar from the top and bottom of the browser. This is compatible with both ie and firefox.

First, we need to know two definitions:

The height of the scroll bar from the top of the browser = the height of the window scroll bar;

Height of the scroll bar from the bottom of the browser = actual height of the document (PAGE) content-height of the scroll bar from the top of the browser-height of the visible window range;

Now that we understand this definition, let's take a look at how to obtain various heights. The following is an example.

Obtains the height of the visible window range.

function getClientHeight(){       var clientHeight=0;       if(document.body.clientHeight&&document.documentElement.clientHeight){           var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;               }else{           var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;           }       return clientHeight;   }

Retrieve the scroll bar height of a window

function getScrollTop(){       var scrollTop=0;       if(document.documentElement&&document.documentElement.scrollTop){           scrollTop=document.documentElement.scrollTop;       }else if(document.body){           scrollTop=document.body.scrollTop;       }       return scrollTop;   }

Get the actual height of the Document Content

function getScrollHeight(){       return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);   }

Here is the sample code:

The following is the specific sample code. Note that the fixed floating box effect is used to demonstrate the effect. The fixed floating box effect under ie does not work in conflict with the above Code. I will not go into it here, readers can see the results in firefox. This code is correct.

<Html xmlns =" http://www.phpernote.com/javascript-function/754.html "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> js gets the scroll bar from the top of the browser, bottom height </title> <script type = "text/javascript" src =" http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js "> </Script> <script type =" text/javascript "> // function getClientHeight () {var clientHeight = 0; if(document.body.clientheight&document.doc umentElement. clientHeight) {var clientHeight = (document. body. clientHeight <document.doc umentElement. clientHeight )? Document. body. clientHeight: document.doc umentElement. clientHeight;} else {var clientHeight = (document. body. clientHeight> document.doc umentElement. clientHeight )? Document. body. clientHeight: document.doc umentElement. clientHeight;} return clientHeight;} // take the function getScrollTop () {var scrollTop = 0; if(document.documentelement&document.doc umentElement. scrollTop) {scrollTop=document.doc umentElement. scrollTop;} else if (document. body) {scrollTop = document. body. scrollTop;} return scrollTop;} // retrieves the actual height of the document content. function getScrollHeight () {return Math. max (document. bo Dy.scrollHeight,document.doc umentElement. scrollHeight);} window. onscroll = function () {var height = getClientHeight (); var theight = getScrollTop (); var rheight = getScrollHeight (); var bheight = rheight-theight-height; document. getElementById ('show '). innerHTML = 'the height of the visible area of the browser is' + height + '<br/> the actual height of the document content is: '+ rheight +' <br/> the height of the scroll bar from the top is '+ theight +' <br/> the height of the scroll bar from the bottom is '+ bheight ;} function fixDiv (div_id, offsetTop) {var OffsetTop = arguments [1]? Arguments [1]: 0; var Obj =$ ('#' + div_id); var ObjTop = Obj. offset (). top; var isIE6 = $. browser. msie & $. browser. version = '6. 0'; if (isIE6) {$ (window ). scroll (function () {if ($ (window ). scrollTop () <= ObjTop) {Obj.css ({'position': 'relative ', 'top': 0});} else {Obj.css ({'position ': 'absolute ', 'top': $ (window ). scrollTop () + offsetTop + 'px ', 'z-Index': 1}) ;}} else {$ (window ). scroll (function () {if ($ (window ). scrollTop () <= ObjTop) {Obj.css ({'position': 'relative ', 'top': 0});} else {Obj.css ({'position ': 'fixed', 'top': 0 + offsetTop + 'px', 'z-Index': 1}) ;}}$ (function () {fixDiv ('show ', 5) ;}); </script> Articles you may be interested in

 
    
 
  
  • Js can only enter numbers and numbers with decimal points, compatible with IE and firefox
    • 
 
  
  • Js obtains the number of rows and columns of a table (compatible with IE and firefox)
    • 
 
  
  • JQuery obtains the height and width of the visible area of the browser window, and the height of the scroll bar.
    • 
 
  
  • Js shields mouse and keyboard events (including right-click, direction key, backspace key, F5 refresh key, etc.), compatible with IE and firefox
    • 
 
  
  • Javascript to get the current mouse position (compatible with IE and firefox)
    • 
 
  
  • Js to get the current mouse position, compatible with ie and firefox
    • 
 
  
  • Javascript shield right-click, compatible with IE and firefox
    • 
 
  
  • DIV layer that slides with the scroll bar (fixed to the DIV layer that does not disappear with browsing on the top of the page)
    •

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More