滚动条元素定位

父子容器的滚动

const scrollTo = (params = {}) => {
  const baseConfig = {
    duration: 500, // 滚动的动画的时间
    scroller: "", // 滚动容器，默认为 body（请使用id，保证唯一，使用的方法querySelector）
    target: "", // 滚动到指定位置的元素,
    extraDistance: 0, // 设置额外偏移量
    selector: document.querySelector,
  };
  const config = {
    ...baseConfig,
    ...params,
  };

  const { target, duration, scroller, selector, extraDistance } = config;
  const documentSelector = selector.bind(document);

  const scrollerDom = documentSelector(scroller);
  const targetDom = documentSelector(target);

  const scrollerDomRect = scrollerDom.getBoundingClientRect();
  const targetDomRect = targetDom.getBoundingClientRect();

  if (targetDom) {
    const { scrollTop } = getScrollTop(scroller, documentSelector);
    const distanceWithScroll = targetDomRect.top - scrollerDomRect.top;
    // 需要减去滚动容器到顶部的距离，默认滚动容器是 body ，scrollerOffsetTop 的值为 0
    const offsetTop = distanceWithScroll + scrollTop;
    let start;
    let timeOff = false;
    let animationId;

    const scrollFrame = (timestramp) => {
      if (start === undefined) {
        start = timestramp;
      }
      const elapsed = timestramp - start;
      const offset = getOffset({
        scrollTop,
        offsetTop,
        elapsed,
        duration,
        extraDistance,
      });
      if (duration - elapsed >= 0) {
        animationId = window.requestAnimationFrame(scrollFrame);
        scolling(scroller, offset + extraDistance, documentSelector);
      } else {
        // 最后一帧因为时间判断可能不会执行，补上最后一帧
        if (!timeOff) {
          scolling(scroller, offsetTop + extraDistance, documentSelector);
          timeOff = true;
        }
      }
    };

    animationId = window.requestAnimationFrame(scrollFrame);

    // 返回一个函数用于取消滚动动画
    return () => {
      if (animationId) {
        window.cancelAnimationFrame(animationId);
      }
    };
  }

  // 如果没有目标元素，返回空函数
  return () => {};
};

const getScrollTop = (scrollerTag, documentSelector) => {
  let scrollTop;
  let scrollerOffsetTop = 0; // 滚动容器距离 body 顶部的距离
  const ele = documentSelector(scrollerTag);
  if (ele) {
    scrollTop = ele.scrollTop;
    scrollerOffsetTop = ele.offsetTop;
  } else {
    scrollTop =
      document.documentElement.scrollTop ||
      window.pageYOffset ||
      document.body.scrollTop;
  }
  return { scrollTop, scrollerOffsetTop };
};

const getOffset = (data) => {
  const { scrollTop, offsetTop, elapsed, duration } = data;
  let offset;
  // 判断是向下还是向上滚动
  if (scrollTop > offsetTop) {
    offset = scrollTop - (elapsed / duration) * (scrollTop - offsetTop);
  } else {
    offset = scrollTop + (elapsed / duration) * (offsetTop - scrollTop);
  }
  return offset;
};

const scolling = (scrollerTag, offset, documentSelector) => {
  const scroller = getScroller(scrollerTag, documentSelector);
  scroller.scrollTo(0, offset);
};

const getScroller = (scrollerTag, documentSelector) =>
  documentSelector(scrollerTag) || window;

export default scrollTo;

使用

scrollTo({
        scroller: "content",
        target: `item-1`,
        selector: document.getElementById,
      });