【react hook】umi获取虚拟dom元素并点击按钮滚动到对应元素位置

最新推荐文章于 2024-07-26 19:17:00 发布

hzxOnlineOk

最新推荐文章于 2024-07-26 19:17:00 发布

阅读量641

点赞数

分类专栏： javascript 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/126643603

版权

javascript 专栏收录该内容

49 篇文章 4 订阅

订阅专栏

const onPosiScroll = (idx) => {
    let labDom;
    let getDom = (clssNm, i) => {
      // 由于umi存在样式hash 因此不能直接通过样式字符串获取元素 需要从样式导入的styles变量里去获取指定className
      return document.querySelectorAll(`.${styles[clssNm]}`)[i];
    }
    switch(idx) {
      case 0: labDom = getDom('labelText', 1); break;
      case 1: labDom = getDom('labelHead', 0); break;
      case 2: labDom = getDom('labelHead', 1); break;
    }
    // console.log('dom===', labDom, labDom.clientHeight, labDom.clientTop, labDom.scrollHeight, labDom.scrollTop, labDom.offsetTop);
    if (!labDom) return;
    window.scrollTo({
      top: labDom.offsetTop, // offsetTop获取当前元素相对于其父元素的左上角位置的左上角位置，也就是说 需要观察其父元素是否是最高级容器，如果不是可能需要追加其他父元素的高度
      behavior: 'smooth',
    });
};