滚动DOM封装

获取当前dom距离滚动区域的高度

/** @param {*} e 要获取的dom元素 */
export const getOffsetTop = (e) => {
  if (!e) {
    return 0;
  }
  let T = e.offsetTop;
  while ((e = e.offsetParent)) {
    T += e.offsetTop;
  }
  return T;
};

可滚动区域滚动到指定内部元素的位置

/**
 * @param {*} scrollNode 滚动区域元素
 * @param {*} node 子元素
 */
export const scrollYTo = (scrollNode, node, options) => {
  if (!scrollNode || !node) {
    return false;
  }
  const { behavior = 'instant', offset = 0 } = options || {};
  const scrollTop = Math.abs(getOffsetTop(node) - getOffsetTop(scrollNode)) - offset;
  scrollNode.scrollTo({
    behavior,
    left: 0,
    top: scrollTop,
  });
};

判断一个元素是否是另一个元素的子元素

/**
 * @param {element} child 子元素
 * @param {element} parent 父元素
 */
export const isChildOf = (child, parent) => {
  let parentNode;
  if (child && parent) {
    parentNode = child.parentNode;
    while (parentNode) {
      if (parent === parentNode) {
        return true;
      }
      parentNode = parentNode.parentNode;
    }
  }
  return false;
};

判断元素是否有滚动条

/**
 * @param {Element} element 要判断的元素
 * @param {String} direction 要判断的方向
 */
export const hasScroll = (element, direction = 'vertical') => {
  const scrollProp = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
  // 如果当前scrollTop或者scrollLeft不为0则有滚动条
  let result = !!(element[scrollProp]);
  // 上面没判断出来尝试降scrollTop或者scrollLeft设置为1再判断一次, 之后恢复
  if (!result) {
    element[scrollProp] = 1;
    result = !!(element[scrollProp]);
    element[scrollProp] = 0;
  }
  return result;
};