scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

最新推荐文章于 2023-12-07 17:49:34 发布
最新推荐文章于 2023-12-07 17:49:34 发布
阅读量1.4k 收藏 1
点赞数
文章标签： 文档 border function xhtml html firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smartview/article/details/3887669
版权

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解



scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标



event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量



　　以上主要指IE之中，FireFox差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

 

 

下面是一个横向滚动应用：

smartview
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三大家族scroll、offset、client
梅花寺
03-08 653
三大家族区别offset家族 offsetHeight: 元素高，height+border+padding offsetWidth: 元素宽，width+border+padding offsetTop: 上边距离带有定位的父盒子的距离（重要） offsetLeft: 左边距离带有定位的父盒子的距离（重要） offsetParent: 最近的带有定位的父盒子。
关于scrollLeft,scrollTop的浏览器兼容性测试
09-05
弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样，接下来介绍下scrollLeft,scrollTop的浏览器兼容性，感兴趣的你可以参考下哈
scrollLeft等属性介绍
10-13 1万+
滚动类特效常用属性： scrollLeft 、scrollTop：设置或获取位于对象最顶/左端和窗口中可见内容的最顶/左端之间的距离。即当前上滚或左滚的距离。 scrollHeight、scrollWidth：获取对象可滚动的总高度/宽度 offsetLeft、offsetTop：获取当前对象与父元素之间的距离（不包含父元素的边框） offsetWidth、 offsetHeight ：获
scrollTop、scrollLeft、scrollWidth、scrollHeight
pig_ning的博客
03-24 1937
scrollTop、scrollLeft、scrollWidth、scrollHeight
一.scrollLeft和scrollTop属性说明
秃头也打码
04-21 4059
注意：这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。 注意：在对这两个参数设置值时，直接用数字就可以了，否者不起作用。 javascript中元素的scrollLeft和scrollTop属性的参数意义： scrollLeft：是该元素的...
页面窗口位置-scrollLeft和scrollTop
个人博客
10-12 4886
页面窗口位置之scrollLeft和scrollTop使用场景适用情况使用场景具体演示查看设置 使用场景 适用情况 这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。 使用场景 当你的子盒子宽度或者高度大于父盒子，且父盒子设置了overflow属性时，就可以使用js操作scrollLeft和scrollTop 这里拿overflow=auto举例 &
JavaScript scrollLeft等属性详解
新页小苗
03-13 5851
 scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
10-30
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
10-29
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解,实例修正版。
offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示
09-22
图示offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性，对于一些页面的控制很有帮助。
JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
01-14
JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
scrollLeft,scrollTop等等详解.pdf
02-23
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth;
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
xuantian868的专栏
10-21 9万+
  HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度o
秒懂scrollWidth/scrollHeight/scrollLeft/scrollTop（详解）
最新发布
weixin_61597234的博客
12-07 2855
1.scrollWidth：返回元素整体的宽度，包括由于 overflow 溢出而在屏幕上不可见的内容。 2.scrollHeight：返回元素整体的高度，包括由于 overflow 溢出而在屏幕上不可见的内容。 3.scrollLeft：被隐藏在内容区域左方的距离。设置该值可以改变元素的滚动位置 4.scrollTop：被隐藏在内容区域上方的像距离。设置该值可以改变元素的滚动位置
javascript实现图片无缝滚动（scrollLeft的用法介绍）
小漠007的专栏
04-25 9094
无标题文档 .piczhanshi{width:976px;height:167px;border:1px #999999 solid;margin:0 auto;} h3{ float:left; background-color: #DDD; float: left; height: 35px; width: 966px; margin-top: 2px; line-he
scrollLeft的具体用法
smile的博客
01-25 5812
1. /* 左右滚动成绩册列表div */ ScrollDiv : function (tp) {     var obj = $("#table_auto_width");     var left = obj[0].scrollLeft;     left = left     if (tp == 'left') {         left -= 50;     } else
一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别！（2）
小苏(º﹃º )的博客
10-21 2391
https://juejin.cn/post/6844903861212168200
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
热门推荐
qq_42089654的博客
05-30 12万+
首先定义一个div。 然后稍微装修一下 下面开始区分 一、clientWidth和clientHeigh 、 clientTop和clientLeft 1，clientWidth的实际宽度 clientWidth =width+左右padding 2，clientHeigh的实际高度 clien...
const handleScroll = (index: number,e:Event) => { const container = document.querySelector(".index_"+index) as HTMLElement const scrollWidth = container.scrollWidth; // 滚动宽度 const scrollLeft = container.scrollLeft; // 滚动条的左侧距离容器左侧的距离 const clientWidth = container.clientWidth; // 可见宽度 if(scrollLeft >= (scrollWidth - clientWidth ) || (scrollWidth - clientWidth ) < 5){ console.log('最右边了',index) jumpToDetailPage(index) } } 这个滚动条事件应该用节流还是防抖，怎么写，vue3+TS项目中
06-07
if(scrollLeft >= (scrollWidth - clientWidth ) || (scrollWidth - clientWidth ) ){ console.log('最右边了',index) jumpToDetailPage(index) } }, 200) ``` 这里的throttle函数会将原函数的执行间隔限制...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值