javascript之scroll事件(一)

scroll

翻译过来就是滚动。在js中称为滚动事件,当用户滚动到指定位置或元素时会触发scroll事件。

scroll事件适用于所有可滚动的元素和window对象(浏览器 窗口),scroll()方法出阿发scroll事件,或规定scroll事件时,运行的函数。

$(document).height();//整个网页的高度

$(window).height();//浏览器可视窗口的高度

$(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)

jquery对应算得的高度

$(window).height();//浏览器当前可视窗口的高度

$(document).height();//浏览器当前窗口文档的高度

$(document.body).height();//浏览器当前窗口文档body的高度

$(document.body).outerHeight(true);//浏览器当前文档body的高度,包括border,padding,margin

$(window).width();//浏览器当前窗口可视区域的宽度

$(document).width();//浏览器当前窗口文档对象的宽度。

$(document.body).width();//浏览器当前窗口文档body的宽度

$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度,包括border,padding,margin

javascript的各种宽度

网页可见区域宽[仅针对body]: document.body.clientWidth

网页可见区域高[仅针对body]: document.body.clientHeight

网页可见区域宽[仅针对body]: document.body.offsetWidth (包括滚动条和边框,若滚动条和边框为0,则和clientWidth相等)

网页可见区域高[仅针对body]: document.body.offsetHeight (包括滚动条和边框,若滚动条和边框为0,则和clientHeight相等)

可视窗口宽度(包括滚动轴宽度):window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari

可视窗口高度,不包括浏览器顶部工具栏: window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari

网页正文全文宽(不包括滚动轴的宽度): document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

//假如网页中没有滚动轴,document.body.scrollWidth和window.innerWidth相等,document.body.scrollHeight和window.innerHeight相等。

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

网页正文部分上: window.screenTop

网页正文部分左: window.screenLeft

屏幕分辨率的高(整个屏幕的高度): window.screen.height

屏幕分辨率的宽(整个屏幕的宽度): window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

整个浏览器可用工作区高度: window.outerHeight

整个浏览器可用工作区宽度: window.outerWidth


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 2,264评论 0 5
  • 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.cl...
    LuckyS007阅读 669评论 0 0
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,814评论 0 8
  • 前不久,我们公司的老板,在旁边又租了一个办公室,差不多两百平方。 用玻璃隔了几个区域,每个空间不算大的。 然后,老...
    丹羽如月阅读 608评论 0 0