js中,offset client scroll的区别

偏移量:offset

offsetHeight: 元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。

offsetWidth: 元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。

offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离

图片发自简书App

客户区大小:client

clientWidth:元素内容区宽度加上左右内边距宽度。

clientHeight:元素内容区高度加上上下内边距高度。

滚动大小:  scroll

指的是包含滚动内容的元素的大小。

scrollHeight:在没有滚动条的情况下,元素内容的总高度。

scrollWidth:在没有滚动条的情况下,元素内容的总宽度。

scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

图片发自简书App

在确定文档的总高度时(包括基于视口的最小高度时),必须取得scrollWidth/clientWidth 和scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 在前面一篇文章中,我们分析了Android应用程序窗口的绘图表面的创建过程。Android应用程序窗口的绘图表面在...
    一个不掉头发的开发阅读 4,658评论 0 14
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,378评论 0 7
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 2,134评论 0 14
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,164评论 0 0