elementUI滚动条,点击dom元素滚动到指定位置

最新推荐文章于 2025-03-12 15:07:40 发布

Fever_昵称

最新推荐文章于 2025-03-12 15:07:40 发布

阅读量1.7k

点赞数

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/qq_57094383/article/details/121636597

版权

本文探讨了如何在使用ElementUI时，通过点击特定DOM元素实现页面滚动到指定位置。主要涉及CSS3和HTML技术，揭示了在前端开发中处理滚动条和元素定位的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <!-- 滚动条的箱子 -->
  <el-scrollbar ref="ref_scrollbar" @scroll="scroll">
    <div class="flex-content plasma">
      <div
        v-for="(item, index) in box_list"
        :key="'1' + index"
        class="plasma-box"
        :class="
          item.state === '已扫描'
            ? 'accomplish'
            : item.state === '扫描中'
            ? 'underway'
            : ''
        "
        @click="click_roll(index)"
      >
        <p>
          <svg-icon icon-class="box_warn" />
          {{ item.number }}
        </p>
        <p>{{ item.No }}</p>
      </div>
    </div>
  </el-scrollbar>

 setup() {
    const ref_scrollbar = ref(null);
    const data = reactive({
      // 记录滚动的位置
      scroll_frequency: 0,
      num: 0,
      // 定时器
      setTimeoutScroll: null,
    });
    function click_roll(index) {
      // 清除定时器
      clearInterval(data.setTimeoutScroll);
      // 每一次滚动的位置
      const scrollnum = 50 * index;
      // 向左滚动
      if (data.scroll_frequency > scrollnum) {
        data.scroll_frequency = scrollnum;
        // 记录上次滚动的位置
        data.setTimeoutScroll = setInterval(() => {
          data.num -= 1;
          ref_scrollbar.value.setScrollLeft(data.num);
          if (data.num === scrollnum) {
            clearInterval(data.setTimeoutScroll);
            data.num = scrollnum;
          }
        }, 1);
      } else {
        // 向右滚动
        data.scroll_frequency = scrollnum;
        data.setTimeoutScroll = setInterval(() => {
          data.num += 1;
          ref_scrollbar.value.setScrollLeft(data.num);
          if (data.num === scrollnum) {
            clearInterval(data.setTimeoutScroll);
            data.num = scrollnum;
          }
        }, 1);
      }
    }
    function scroll({scrollLeft}) {
      data.scroll_frequency = Math.floor(scrollLeft);
      data.num = Math.floor(scrollLeft);
    }
    return {...toRefs(data), box_list, click_roll, ref_scrollbar, scroll};
  },
};