美文网首页
vue 进行滚动条定位

vue 进行滚动条定位

作者: 我和我的前端 | 来源:发表于2022-06-02 09:56 被阅读0次

锚点定位:
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 进行滚动条定位

      本文链接:https://www.haomeiwen.com/subject/cdfqmrtx.html