scrollWidth/scrollHeight、scrollTop/scrollLeft[盒模型系

LoftySoul 发布于2019-08-26 13:29 / 622人阅读

摘要：当前卷去的竖向高度的大小当前卷去的横向宽度的大小注意存在最大值和最小值。最小值真实的高度一屏的高度最大值读写属性系列的系列的系列的上面的对属性中除这对属性之外的其他属性都是只读属性只能通过属性获取而不能修改属性的值。

scrollWidth/scrollHeight

在没有滚动条的时候，即没有内容溢出时：

scrollWidth/scrollHeight获取的结果和clientWidth/clientHeight是一样的，即：

scrollWidth === clientWidth;
scrollHeight === clientHeight;

有滚动条的时候,即内容溢出时：

真实内容的宽度和高度（包含溢出的内容），在加上左边的padding 和上边的padding 值，即：

scrollWidth === clientWidth + paddingLeft(或者clientLeft);
scrollHeight === clientHeight + paddingTop(或者clientTop);

scrollTop/scrollLeft

scrollTop: 竖向滚动条卷去的高度。
scrollLeft：横向滚动条卷去的宽度。

//当前卷去的竖向高度的大小
document.documentElement.scrollTop||document.body.scrollTop
//当前卷去的横向宽度的大小
document.documentElement.scrollLeft||document.body.scrollLeft

注意：

scrollTop/scrollLeft存在最大值和最小值。

最小值mini === 0;
//真实的高度 - 一屏的高度
最大值max === scrollHeight - clientHeight;

‘读写属性’

client系列的clientWidth/clientHeight、clientLeft/clientTop;
offset系列的offsetWidth/offsetHeight、offsetLeft/offsetTop;
scroll系列的scrollWidth/scrollHeight、scrollLeft/scrollTop;
上面的6对属性中除scrollLeft/scrollTop这对属性之外的其他属性都是只读属性（只能通过属性获取而不能修改属性的值）。
scrollLeft/scrollTop：是可读写属性，我们不仅仅可以获取它的值，还可以修改它的值。

//例如，让滚动条出现在最顶部，我们需要这样设置
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

PS: 因为有最大和最小值，如果我们给他设置，该值比最大值大，则默认设置为最大值；如果该值比最小值小，则默认设置为最小值。

我们可以写一个方式把他们封装在一起。

var boxModal = function (attr, value) {
    //只有scrollTop/scrollLeft可以修改，其他既是修改了也不会生效，所以我们可以这么写
    if (typeof value !== "undefined") {
        document.documentElement[attr] = value;
        document.body[attr] = value;
    }
    return document.documentElement[attr] || document.body[attr];
}

这么使用：

utils.boxModal("scrollTop", 0);
utils.boxModal("scrollTop");
utils.boxModal("clientHeight");

GPU云服务器云服务器盒模型盒模型html吗简述html盒模型雷军系

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108927.html

Js中关于top、clientTop、scrollTop、offsetTop

摘要：由于为外层元素设置了，所以内层元素会向上卷。和全面支持，而和不支持除外。认为是网页内容高度，不过最小值是。认为和都是网页内容高度，只不过当网页内容高度小于等于时，的值是，而可以小于。认为是可视区域滚动条加边框。转载自http://www.cnblogs.com/seven_...网页可见区域宽： document.body.clientWidth;网页可见区域高： document....

xorpay 2019-08-20 12:01 评论0 收藏0
javascript基础总结（三）——盒子模型

摘要：中的盒子模型通过中提供一系列的方法和属性获取页面中元素的样式信息值系列内容的宽高是给元素定义的这两个样式。 1、js中的盒子模型通过js中提供一系列的方法和属性获取页面中元素的样式信息值； 2、client系列内容的宽高：是给元素定义的width/height这两个样式。如果没有设置height值，容器的高度会根据里面内容自己适应，这样获取的值就是真实的内容的高；如果设置固定的高...

RayKr 2019-08-20 16:06 评论0 收藏0
一次性弄懂回流和重绘

摘要：所以由此来看重绘不一定导致回流，回流一定会导致重绘前面我们说回流和重绘是会对进行修改，会消耗性能，所以我们要尽可能减少回流和重绘的次数。浏览器自己也清楚，如果每次操作都即时地反馈一次回流或重绘，那么性能上来说是扛不住的。回流（Reflow）重绘（Repaint）什么时候会触发回流或重绘呢？当我们对dom 进行修改当时候会引发它外观（样式）上的改变时，就会触发回流或重绘。这个过程本...

JerryWangSAP 2019-08-23 14:56 评论0 收藏0
前端性能优化（JavaScript补充篇）

摘要：而像和会增加作用域链的长度，所以也会降低性能。但是用获取一些属性时，会不由自主地强迫队列中的所有渲染事件前不完成。在条件增加时，所带来的性能负担要高于，因此建议使用。它代价昂贵，且容易失控。正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客以下内容均来自《高性能JavaScript》 JavaScript文件加载 ...

molyzzx 2019-08-19 14:42 评论0 收藏0
前端性能优化（JavaScript补充篇）

摘要：而像和会增加作用域链的长度，所以也会降低性能。但是用获取一些属性时，会不由自主地强迫队列中的所有渲染事件前不完成。在条件增加时，所带来的性能负担要高于，因此建议使用。它代价昂贵，且容易失控。正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客以下内容均来自《高性能JavaScript》 JavaScript文件加载 ...

taoszu 2019-08-01 14:38 评论0 收藏0