判断元素是否滚动到底-技术圈

Element.scrollHeight 只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

null

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。高度的度量方式与 clientHeight 相同：包括元素的内边距，但不包括元素的边框、外边距以及水平滚动条（如果存在）。它也包括 ::before 和 ::after 这样的伪元素的高度。如果元素的内容不需要垂直滚动条就可以容纳，则其 scrollHeight 等于 clientHeight。

问题与解决方案

1、判断元素是否滚动到底

scrollTop 是一个非整数，而 scrollHeight 和 clientHeight 是四舍五入的，因此确定滚动区域是否滚动到底的唯一方法是查看滚动量是否足够接近某个阈值（在本例中为 1）：

Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1;

以下内容不会一直有效，因为 scrollTop 可能包含小数：

element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight;

2、判断元素是否能滚动

当容器不滚动但有溢出的子容器时，这些检查可以确定容器能否滚动：

window.getComputedStyle(element).overflowY === "visible";window.getComputedStyle(element).overflowY !== "hidden";

3、判定用户是否阅读过文本

监听 onscroll 事件，可以用来判定用户是否阅读过文本。

3、阻止IOS滚动穿透

在内容区域滚动的时候，只要没有到达顶部或者底部的时候，滚动内容区域背景是不会跟着滚动的，但是当我们滚动到底部的时候继续向下滑动，页面就发生了滚动。根据这个行为大概就可以总结出方案，当页面滚动到底部或者顶部的时候组织他的默认滚动行为不就行了吗。下面是他的具体代码

<div @touchmove="handlemove" @touchstart="handleStart"></div>
let startY = 0;const handleStart = (e) => {  const targetTouches = e.targetTouches || []  if (targetTouches.length > 0) {    const touch = targetTouches[0] || {};    startY = touch.clientY;  }}
function handlemove (e) {  const targetTouches = e.targetTouches;  const scrollTop = e.currentTarget.scrollTop;  if (targetTouches.length > 0) {    const touch = targetTouches[0] || {};    const moveY = touch.clientY;    if (scrollTop === 0 && moveY > startY) {      e.preventDefault();    } else if (scrollTop === e.currentTarget.scrollHeight - e.currentTarget.offsetHeight && moveY < startY) {      e.preventDefault();    }  }}

思路很简单，就是监听touchstart和touchmove事件，判断是否滚动到顶部还有顶部。首先记录touchstart的时候手指距离顶部的距离，在移动的过程中在获取手相对屏幕的一个位置，通过这两个位置比较，判断现在是向上滑动还是向下滑动，从而判断是否到达了边界情况。