js获取页面向上或者向左滚动的尺寸
分类:实例代码
本章节介绍一下如何获取页面向上或者向左滚动的尺寸。
也就是当页面的尺寸大于浏览器视口的尺寸的时候,就会出现滚动条,向下拖动滚动条或者向右拖动滚动条,就会有一部页面被视口所遮盖,这里就是获取被遮盖的尺寸。所谓"视口"只是实际显示文档内容的浏览器的一部分,不包括浏览器的菜单、工具条、标签页等“外壳部分”。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin:0px; padding:0px; } #box { width:1800px; height:1500px; background:#ccc; } #show { width:100px; height:50px; background:red; position:fixed; top:10px; left:10px; } </style> <script type="text/javascript"> function getScrollOffset(w){ w = w || window; if (w.pageXOffset != null) { return { x: w.pageXOffset, y: w.pageYOffset }; } var d = document; //标准模式 if (document.compatMode == "CSS1Compat") { return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop }; } //怪异模式 return { x: d.body.scrollLeft, y: d.body.scrollTop }; } window.onscroll = function () { var p = getScrollOffset(); show.innerHTML = p.x+"<br/>"+p.y } </script> </head> <body> <div id="show"></div> <div id="box"></div> </body> </html>
上面的代码实现了我们的要求,代码非常简单,更多内容可以参阅相关阅读。
相关阅读:
(1).window.pageXOffset可以参阅window.pageXOffset一章节。
(2).window.pageYOffset可以参阅window.pageYOffset一章节。
(3).scrollLeft可以参阅js scrollLeft一章节。
(4).onscroll可以参阅javascript scroll事件一章节。
js获取页面向上或者向左滚动的尺寸,这样的场景在实际项目中还是用的比较多的,关于js获取页面向上或者向左滚动的尺寸就介绍到这了。
js获取页面向上或者向左滚动的尺寸属于前端实例代码,有关更多实例代码大家可以查看。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu