search

huming0618 / learn-the-html-css

Re-learning the HTML & CSS
0 stars 0 forks source link

视图滚动 #2

Open huming0618 opened 7 years ago

huming0618 commented 7 years ago

scroll相关

huming0618 commented 7 years ago

element.offsetTop

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
huming0618 commented 7 years ago

element.scrollTop

这个Element.scrollTop 属性可以设置或者获取一个元素距离他容器顶部的像素距离。
一个元素的 scrollTop 是可以去计算出这个元素距离它容器顶部的可见高度。
当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0.
huming0618 commented 7 years ago

Element.scrollHeight

MDN

The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element's padding, but not its border or margin.

应用

检测是否已滚动到底部

element.scrollHeight - element.scrollTop === element.clientHeight
huming0618 commented 7 years ago

Element.clientHeight

MDN

The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin. clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).