m0_37158404的博客

Element.scrollTop - Web APIs | MDNElement.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。scrollTop 可以被设置为任何整数值，同时注意：如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。

相关属性解释见专栏其他文章介绍只讨论块级元素的情况下：（1）元素没有滚动条，且没有border-top, border-bottom时，三者相等（2）元素没有垂直滚动条时，scrollHeight，clientHeight相等（3）元素有垂直滚动条，且没有border-top, border-bottom时，clientHeight和offsetHeight相等（4）元素有垂直滚动条，且有border-top或 border-bottom时，三者不相等JS在线编辑器,JS在线运行

本文章相关的属性：scrollHeight，clientHeight，scrollTop，offsetHeight元素可滚动距离计算公式： let canScrollDistance =element.scrollHeight - element.clientHeight;示例1：实现滚动条缓慢滚动到底部

HTMLElement.offsetLeft - Web API 接口参考 | MDNHTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。如下图：offsetHeight = 内容高 + paddingTop + paddingBottom + borderTop + borderBottom...

HTMLElement.offsetParent - Web API 接口参考 | MDNHTMLElement.offsetParent是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的table,td,th,body元素。当元素的style.display设置为 "none" 时，offsetParent返回null。offsetParent很有用，因为offsetTop和offsetLeft都是相对于其内边距边界的。HTMLElem...

clientTop： 元素上边框的宽度，即border-top-width，只读属性，number类型clientLeft：元素左边框的宽度，即border-left-width，只读属性，number类型不存在clientBottom和clientRight属性，可通过如下方式获取

Element.clientHeight - Web APIs | MDN是 Internet Explorer 对象模型中引入的属性。是一个只读属性，其值计算方式如下；clientHeight = 内容高 + paddingTop + paddingBottom - 水平滚动条的高度 (如果存在)如图：控制台选中元素时，看到的蓝色部分就是盒子内容box-sizing值为content-box时：内容高 = css heightbox-sizing值为border...