在vue3 中,使用element-plus中的el-scrollbar,让内容元素自动滚动

2023-11-19


在vue3 中,使用element-plus中的el-scrollbar,在el-scrollbar中如果元素过大出现滑动,就自动滑动,到底部时就返回顶部重新向下滑动,鼠标放入框内停止滑动

模板部分:

<template>
  <el-scrollbar ref="scrollArea" class="scroll-container" @mouseenter="stopScroll" @mouseleave="startScroll">
    <div class="scroll-content">
      <!-- 这里放入你想滚动的内容 -->
    </div>
  </el-scrollbar>
</template>

脚本部分:

import { ref, onMounted, onUnmounted } from 'vue';
import { ElScrollbar } from 'element-plus';

export default {
  components: {
    ElScrollbar
  },

  setup() {
    const scrollArea = ref(null);
    let timer = null;
    const SCROLL_SPEED = 1; // 每次滚动的像素数,可以根据需要调整

    const startScroll = () => {
      if (timer) {
        clearInterval(timer);
      }
      timer = setInterval(() => {
        // 获取滚动容器
        const container = scrollArea.value.$el.querySelector('.el-scrollbar__wrap');
        // 判断是否已滚动到底部
        if (container.scrollHeight - (container.scrollTop + container.clientHeight) <= 0) {
          // 滚动到顶部
          container.scrollTop = 0;
        } else {
          // 向下滚动
          container.scrollTop += SCROLL_SPEED;
        }
      }, 30); // 根据需要调整滚动间隔
    };

    const stopScroll = () => {
      if (timer) {
        clearInterval(timer);
      }
    };

    onMounted(() => {
      startScroll();
    });

    onUnmounted(() => {
      stopScroll();
    });

    return {
      scrollArea,
      startScroll,
      stopScroll
    };
  }
};

样式部分:

.scroll-container {
  width: 100%;
  height: 300px; /* 你可以根据需要调整高度 */
}

.scroll-content {
  /* 根据内容进行相应样式调整 */
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在vue3 中,使用element-plus中的el-scrollbar,让内容元素自动滚动 的相关文章

随机推荐

  • react脚手架配置别名并自动提示[VSCode]

    1 安装三方库 craco craco yarn add craco dev npm install craco craco save dev 2 配置craco config js const path require path modu
  • idea调整代码标签编辑器标签editor tabs的横排和竖排

    第一 找到任意一个文件鼠标右击 然后选择Configure Editor Tabs 如下图所示 第二 在tab placement中选择top left right bottom等即可调整标签位置 最后点击apply完成设置 最后结果如下图
  • python中,获取字符串的长度

    说明 与其他的语言一样 有时候需要查看或者说计算字符串的长度 在此记录下python中通过哪个函数实现 操作过程 1 通过len 函数返回字符串的长度 gt gt gt text python gt gt gt len text 6 gt
  • 投资不能只看概念,也要尝试使用

    目前 越来越多的行业开始应用聊天机器人ChatGPT 其中 一款免费的国内网站 多御浏览器 提供了安全快速 高效稳定的浏览器体验 该网站不仅提供了许多实用工具 包括当下非常流行的ChatGPT 也为开发人员和初学者提供了方便的在线工具解决方
  • 《Web安全基础》02. 信息收集

    web 1 CDN 绕过 1 1 判断是否有 CDN 服务 1 2 常见绕过方法 1 3 相关资源 2 网站架构 3 WAF 4 APP 及其他资产 5 资产监控 本系列侧重方法论 各工具只是实现目标的载体 命令与工具只做简单介绍 其使用另
  • 数据库数据导入的基本操作

    数据库数据导入的步骤 开发工具与关键技术 数据库 作者 邱慧敏 撰写时间 2019 01 27 数据库最基本的操作就是 如何导入数据 第一步 打开 登录 数据库 第二步 鼠标右键数据库 然后点击新建数据库 第三步 编程数据库名称 可 更改路
  • C++容器排序算法的简单应用

    功能实现 1 去掉所有重复的单词 2 按照单词的长度进行排序 3 统计长度等于或者超过6个字符的单词个数 4 按照单词的长度顺序进行输出 include
  • Ceph优化系列(一):Ceph架构及性能优化

    转载 Ceph架构及性能优化 对分布式存储系统的优化离不开以下几点 1 硬件层面 硬件规划 SSD选择 BIOS设置 2 软件层面 Linux OS Ceph Configurations PG Number调整 CRUSH Map 其他因
  • NoClassDefFoundError: org/springframework/cloud/client/loadbalancer/LoadBalancedRetryFactory

    异常信息 Exception in thread main java lang NoClassDefFoundError org springframework cloud client loadbalancer LoadBalancedR
  • CUDA异步执行与同步调试

    异步执行 默认情况下 GPU 操作是异步的 当您调用使用 GPU 的函数时 操作会被排入特定设备的队列 但不一定要等到稍后才会执行 这允许我们并行执行更多计算 包括在 CPU 或其他 GPU 上的操作 一般来说 异步计算的影响对调用者是不可
  • java基础-CAS、synchronized和AQS的理解

    乐观锁与悲观锁的区别 悲观锁 总是假设最坏的情况 每次去拿数据的时候都认为别人会修改 所以每次在拿数据的时候都会上锁 这样别人想拿这个数据就会阻塞直到它拿到锁 共享资源每次只给一个线程使用 其它线程阻塞 用完后再把资源转让给其它线程 传统的
  • Java数据库基础3

    行转列 首先我们默认的情况 每个名字都输出两次 而最终结果只有一次名字 所以肯定是 以名字分组 group by select from test 9 group by name 对我们来说 id 课程 和分数都不需要了 只需要有名字 然后
  • VMware设置centos7共享文件夹

    前言 VMware在设置centos6共享文件夹的时候 只需要安装vmware tools 然后在vmware里面配置共享文件夹即可 但是对于centos7 设置完之后 并不能如愿的将我们共享的目录显示在 mnt hgfs目录下 这里我们需
  • 新的征程

    十二生肖对应的五行 金 猴 鸡 木 虎 兔 水 鼠 猪 火 蛇 马 土 牛 龙 羊 狗 纳音五行如下 甲子乙丑海中金 甲午乙未沙中金 丙寅丁卯炉中火 丙申丁酉山下火 戊辰己巳大林木 戊戌己亥平地木 庚午辛未路旁土 庚子辛丑壁上土 壬申癸酉剑
  • unity2019.3 所有控制按键输入方法 input 鼠标输入,键盘输入,触屏输入,屏幕点击事件,物体拖拽点击事件说明带实例

    配置按键 unity为满足跨平台需求支持多种输入方式 比较常见的有触屏 摇杆 鼠标 按键 虽然unity可以直接在代码中直接指定某个按键的功能 但我们最好使用按键管理器来为项目配置输入操作 这是不仅是为了更好的统一管理 还是因为unity提
  • 白盒基本路径发测试实验报告_白盒测试之基本路径覆盖法

    基本路径覆盖法是在程序控制流图的基础上 通过分析控制结构的环路复杂性 导出基本可执行路径集合 设计测试用例的方法 该方法把覆盖的路径数压缩到一定限度内 程序中的循环体最多只执行一次 设计出的测试用例要保证在测试中 程序的每一个可执行语句至少
  • 20最佳代码审查工具-专门为开发人员准备

    程序员总是面临最后期限的压力和很多延误软件设计相当不稳定 整个产品是不稳定的 这种不稳定性的设计软件的原因是 它是不能正常测试 来的工作代码审查工具 的代码审查工具可以帮助web开发人员指出他们哪些区域的程序代码是错误的也可能有机会是不正确
  • 【教程】FISCO-BCOS一条龙配置go-sdk控制台搭建并启动

    前言 官网那个教程不是很好用 我在自己做了一遍之后整理了一下自己的步骤给大家 这篇没那么多废话直接开始 环境 Ubuntu18 正文 这里讲的是一条龙命令复制到最后直接完成 如果没有配置环境旁边也有文章点击跳转 1 启动节点 原理直接去看我
  • PCB设计小结

    PCB设计小结 1 给所有元器件编号 快捷键T A A 2 pcb中旋转 3 对齐 pcb中快捷键A 一般是右对齐 底对齐 保存间距 4 CTRL Z键撤销无效 点击撤销按钮也无效 保存重启软件就可以了 5 测距 ctrl m 6自动布线
  • 在vue3 中,使用element-plus中的el-scrollbar,让内容元素自动滚动

    在vue3 中 使用element plus中的el scrollbar 在el scrollbar中如果元素过大出现滑动 就自动滑动 到底部时就返回顶部重新向下滑动 鼠标放入框内停止滑动 模板部分