vue 进行滚动条定位

锚点定位:
document.getElementsByClassName('scroll-panel')[index].scrollIntoView();
拖动滚动条切换锚点:

document.getElementsByClassName("scroll-bottom")[0]?.addEventListener("scroll", function ($event) {
      let top = ($event as any).target.scrollTop;
      let scrollPanel = document.getElementsByClassName("scroll-panel");
      let height = 0;
      for (let i = 0; i < scrollPanel.length; i++) {
        height += (scrollPanel[i] as any).offsetHeight;
        if (height >= top) {
          that.activeIndex = i;
          break;
        }
      }
    });

在有滚动条的element上添加scroll的监听事件,其中scrollTop指滚动条距离最开始的位置,offsetHeight指每部分所占的实际高度,通过比较scrollTop与各个部分的offsetHeight,可以确定当前所在的锚点是第几个。

你可能感兴趣的:(vue 进行滚动条定位)