So when a user clicks a button on a longer content page to display the div layer, there is no effect (it's already shown at the top of the page), so we need to prepare information about where the user is currently browsing. Before implementing this requirement, let's take a look at the tools in JS that we can use:
Web page Visible area wide: document.body.clientWidth;
Page visible Area High: document.body.clientHeight;
Page visible area wide: Document.body.offsetWidth + "(including Edge and scroll bar width)";
Page visible Area High: Document.body.offsetHeight + "(including the edge of the width)";
Web page Full text width: document.body.scrollWidth;
The full text of the Web page is high: document.body.scrollHeight;
Web page is rolled up high (FF): Document.body.scrollTop;
Web pages are rolled up high (IE): document.documentElement.scrollTop;
The pages are rolled away left: document.body.scrollLeft;
The main body part of the Web page: window.screentop;
Page body part left: window.screenleft;
High screen resolution: window.screen.height;
Width of screen resolution: Window.screen.width;
Screen available workspace height: window.screen.availHeight;
Screen available working area width: window.screen.availWidth;
Your screen setting is Window.screen.colorDepth + "bit color";
Your screen is set Window.screen.deviceXDPI + "pixel/inch";
This piece of information from the network, see so many similar concepts I have gone mad, but in the technical person's persistent, I still tenacious read and did some understanding. After my own understanding and absorption, I felt that I would freak out every time I wanted to get a height or width of information. So I did some sorting and abstraction on these properties of the browser, and stripped off so many similar properties by three objects, the first one was the page, the second was the window, and the third was the viewport. Look at the picture to understand the meaning of my three objects:
To make an explanation of these three concepts:
Page: is an abstraction of the page that we make, and his height is usually higher than our browser's, and the width is usually less than or equal to our browser width
browser window: Is the browser we use an abstraction, he contains the menu bar, toolbars, bookmarks bar, status bar, page display area, and so on. So his height is absolutely greater than the height of the viewport, and the width is absolutely greater than or equal to the width of the viewport.
Viewport: is the area where the page is displayed in the browser
With these three concepts bedding, let's write a small library to get information about the height and width of this object:
Copy Code code as follows:
var Browser = {
};
Page
Browser.page = (function () {
return {
Scrolltop:function () {
Return Math.max (Document.body.scrollTop, Document.documentElement.scrollTop);
},
Scrollleft:function () {
Return Math.max (Document.body.scrollLeft, document.documentElement.scrollLeft);
},
Height:function () {
var _height;
if (Document.compatmode = = "Css1compat") {
_height = Document.documentElement.scrollHeight;
} else {
_height = Document.body.scrollHeight;
}
return _height;
},
Width:function () {
var _width;
if (Document.compatmode = = "Css1compat") {
_width = Document.documentElement.scrollWidth;
} else {
_width = Document.body.scrollWidth;
}
return _width;
}
};
})();
Window:
Browser.window = (function () {
return {
Outerheight:function () {
var _hei = window.outerheight;
if (typeof _hei!= "number") {
_hei = Browser.ViewPort.outerHeight ();
}
return _hei;
},
Outerwidth:function () {
var _wid = window.outerwidth;
if (typeof _wid!= "number") {
_wid = Browser.ViewPort.outerWidth ();
}
return _wid;
},
Innerheight:function () {
var _hei = window.innerheight;
if (typeof _hel!= "number") {
_hei = Browser.ViewPort.innerHeight ();
}
return _hei;
},
Innerwidth:function () {
var _wid = window.innerwidth;
if (typeof _wid!= "number") {
_wid = Browser.ViewPort.innerWidth ();
}
return _wid;
},
Height:function () {
return Browser.Window.innerHeight ();
},
Width:function () {
return Browser.Window.innerWidth ();
}
}
})();
View Port:
Browser.viewport = (function () {
return {
Innerheight:function () {
var _height;
if (Document.compatmode = = "Css1compat") {
_height = Document.documentElement.clientHeight;
} else {
_height = Document.body.clientHeight;
}
return _height;
},
Innerwidth:function () {
var _width;
if (Document.compatmode = = "Css1compat") {
_width = Document.documentElement.clientWidth;
} else {
_width = Document.body.clientWidth;
}
return _width;
},
Outerheight:function () {
var _height;
if (Document.compatmode = = "Css1compat") {
_height = Document.documentElement.offsetHeight;
} else {
_height = Document.body.offsetHeight;
}
return _height;
},
Outerwidth:function () {
var _width;
if (Document.compatmode = = "Css1compat") {
_width = Document.documentElement.offsetWidth;
} else {
_width = Document.body.offsetWidth;
}
return _width;
},
Width:function () {
return Browser.ViewPort.innerWidth ();
},
Height:function () {
return Browser.ViewPort.innerHeight ();
}
}
})();
Make a few notes:
1, has been able to support access to multiple browsers within the width and height of the viewport information
2, in IE 9 already and other browsers (Opera, Chrome, Firfox, Safari) have been able to support the use of Window.innerheight, Window.innerwidth, Window.outerheight, Window.outerwidth these four properties get the width height information of the browser's window, viewport, but IE9 's previous IE versions do not have these properties, so in this case, I equate the concept of viewport and window.
2. Although window has width and height information, it is not necessarily the true width and height information of the Real browser window. Because some browsers return results that do not contain the height information for the menu bar, toolbars, and so on.
Example Demo:
In a page with too much vertical content, make a div always remain in the center of the viewport (not the exact center position):
Code:
Copy Code code as follows:
window.onload = Window.onresize = function () {
var top = Math.Round (Browser.Page.scrollTop () + (Browser.ViewPort.height ()/2)-(parseint (document.getElementById () Divcenter "). Style.height)/2);
var left = Math.Round (Browser.Page.scrollLeft () + (Browser.ViewPort.width ()/2)-(parseint (document.getElementById () Divcenter "). Style.width)/2);
document.getElementById ("Divcenter"). Style.top = top + "px";
document.getElementById ("Divcenter"). Style.left = left + "px";
}
When you test, you can change the window to see the size of the way.
It's late, good night!
Source code Download view
