判断元素滚动状态

Posted 2021-08-25 ！win ！

前情

最近在开发需求时，有一个需求需要根据当前元素是否是可滚动的，如果是可滚动的则需要提示一个滚动提示，点击提示能滚动到最底部。

方式1

通过元素的scrollHeight和clientHeight来判断当前元素是否可滚动，在绝大多数场景下它是可以的，但是对于一些特殊场景是有一定问题，

• 子元素超出父元素，而且父元素不设置 overflow: auto
• 子元素相对父元素绝对定位

排除上面二种场景用于实际项目中也是很好的，封装成方法如下：

/**
* @param {htmlElement} ele
*/
function eleCanScroll(ele) {
  if (!ele instanceof HTMLElement) {
    console.log("请传入DOM元素");
    return;
  }
  const {scrollHeight, clientHeight} = ele;
  if (scrollHeight > clientHeight) {
    return true;
  }
  return false;
}

演示地址：https://jsbin.com/jucoyavoje/1/edit?html,css,js,console,output

方式2

通过判断元素的scrollTop是否可以改变来判断当前元素是否可滚动

• 一个元素的 scrollTop 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。详见：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
• scrollTop 可以被设置为任何整数值，同时注意：如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。

封装成方法如下：

/**
* @param {HTMLElement} ele
*/
function eleCanScroll(ele) {
  if (!ele instanceof HTMLElement) {
    console.log("请传入DOM元素");
    return;
  }
  if (ele.scrollTop > 0) {
    return true;
  } else {
    ele.scrollTop++;
    // 元素不能滚动的话，scrollTop 设置不会生效，还会置为 0
    const top = ele.scrollTop;
    // 重置滚动位置
    top && (ele.scrollTop = 0);
    return top > 0;
  }
}

演示地址：https://jsbin.com/visofakewo/5/edit?html,js,console,output

参考博文：https://segmentfault.com/a/1190000021934483

好好学习！天天向上！