Web page Making tips: Get the height of the viewable area of the page

Source: Internet
Author: User
Tags return window client

Article Introduction: Gets the height of the page 's viewable area, gets the page height, and gets the page height of the scroll bar scrolling up.

function Getwh () {var wh = {}; "Height Width". Replace (/[^\s]+/g,function (a) {var b = a.tolowercase (); wh[b]=window["inner". Concat (a)] Document.compatmode = = "Css1compat" && document.documentelement["Client". Concat (a)] document.body["Client" . Concat (a)]; }); return WH; Understanding two nouns: Backcompat standard compatibility mode shutdown (weird mode) Css1compat standard compatibility Mode This method is to get the height of the visible area of the page, in general, Window.innerheight can be obtained, if normal mode, And in the case of ClientHeight, the document.documentElement.clientHeight gets the visual area height. In weird mode, it is obtained using document.body.
function Getbodywh () {var wh = {}; "Height Width". Replace (/[^\s]+/g,function (a) {var b = a.tolowercase (); Wh[b]=document.compatmode = = "Css1compat" & & document.documentelement["scroll". Concat (a)] document.body["scroll". Concat (a)]; }); return WH; This is used to obtain the height of the page for the adaptive time of the IFRAME.
var ss = {}; SS.SCROLLTOPFN = function (arg) {var a = Navigator.userAgent.toLowerCase (). indexof ("WebKit");/to Judge WebKit kernel var scrolltop ; if (A>-1document.compatmode = = "Backcompat") {THIS.SCROLLTOPFN =function (ARG) {if (typeof arg = = ' number ') { Document.body.scrollTop = arg; }else{return Document.body.scrollTop}} }else{this.scrolltopfn =function (ARG) {if (typeof arg = = ' number ') {document.documentElement.scrollTop = arg;} else{return Document.documentElement.scrollTop}} Return this.scrollTopFn.apply (this,arguments); This return scrolltop is the height of the page scrolling up, because in the WebKit kernel rendering is using the body, so and the above two judgments are not the same. In weird mode, it's also with body. All other cases are used documentelment. These things are very annoying, today made a day to sum up all these, online search also did not find a special standard of the argument, one after another try to write a few functions for later use. If someone has a better way of judging, but also hope to inform, thank you!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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