Element UI【详解】el-scrollbar 滚动条组件

el-scrollbar 滚动条组件用于优化页内滚动条的UI效果,使用时必须指定高度!

复制代码
/*el-scrollbar 必须指定高度*/
.scrollMenuBox {
    height: 200px;
    width: 100px;
    border: 1px solid red;
}

控制el-scrollbar内滚动条的方法与控制页面的滚动条的方法基本一样,只是获取el-scrollbar节点的滚动条时,需使用 this.$refs.scrollMenuRef.wrap

复制代码
<el-scrollbar ref="scrollMenuRef" class="scrollMenuBox">
    <p v-for="i in titleTotal" :key="i">标题{{i}}</p>
</el-scrollbar>

获取 el-scrollbar 内滚动条向下滚动的距离

复制代码
this.$refs.scrollMenuRef.wrap.scrollTop

控制 el-scrollbar 内滚动条滚动到指定位置

比如,向下滚动 100px

复制代码
this.$refs.scrollMenuRef.wrap.scrollTop

el-scrollbar 内内容的高度

复制代码
this.$refs.scrollMenuRef.wrap.scrollHeight

监听 el-scrollbar 内滚动条的滚动

复制代码
this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu);

隐藏水平滚动条

使用 scoped 时,需用 /deep/ 实现样式穿透

复制代码
/deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
}

el-scrollbar 内滚动条跟随页面一起滚动

复制代码
mounted() {
    // 监听浏览器/页面滚动条的滚动
    window.addEventListener("scroll", this.scrollContent);
},
复制代码
// 页面滚动时触发
scrollContent() {
    // scrollTop为显示屏顶部与整个文档顶部间的距离
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 页面滚动条滚动时,el-scrollbar内滚动条按比例跟随一起滚动
    this.$refs.scrollMenuRef.wrap.scrollTop = scrollTop / document.body.scrollHeight * this.$refs.scrollMenuRef.wrap.scrollHeight
},

完整范例代码

复制代码
<template>
    <div style="padding: 20px">
        <div class="menuBox">
            <button @click="scrollTo(25)">目录滚动到标题25</button>
            <br>
            <button @click="getScrollTop">获取目录内滚动条向下滚动的距离</button>
            <hr>
            <p>目录</p>
            <el-scrollbar ref="scrollMenuRef" class="scrollMenuBox">
                <p v-for="i in titleTotal" :key="i">标题{{i}}</p>
            </el-scrollbar>
        </div>
        <div class="contentBox">
            <p v-for="i in rowTotal" :key="i">第{{i}}行</p>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                // 总行数
                titleTotal: 50,
                // 总行数
                rowTotal: 200
            }
        },
        mounted() {
            // 监听浏览器/页面滚动条的滚动
            window.addEventListener("scroll", this.scrollContent);
            // 监听el-scrollbar内滚动条的滚动
            this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu);
        },
        methods: {
            // el-scrollbar内滚动条滚动时,打印滚动条向下滚动的距离
            scrollMenu() {
                console.log(this.$refs.scrollMenuRef.wrap.scrollTop)
            },
// 页面滚动时触发
            scrollContent() {
                // scrollTop为显示屏顶部与整个文档顶部间的距离
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 页面滚动条滚动时,el-scrollbar内滚动条按比例跟随一起滚动
                this.$refs.scrollMenuRef.wrap.scrollTop = scrollTop / document.body.scrollHeight * this.$refs.scrollMenuRef.wrap.scrollHeight
            },
            // el-scrollbar内滚动条滚动到指定的标题号
            scrollTo(titleNo) {
                this.$refs.scrollMenuRef.wrap.scrollTop = (titleNo - 1) / this.titleTotal * this.$refs.scrollMenuRef.wrap.scrollHeight
            },
            // 获取el-scrollbar内滚动条向下滚动的距离
            getScrollTop() {
                alert(this.$refs.scrollMenuRef.wrap.scrollTop)
            }
        },
    }
</script>
<style scoped>
    /*目录悬浮*/
    .menuBox {
        position: fixed;
    }
 
    /*内容居中*/
    .contentBox {
        width: 60%;
        margin: auto;
    }
 
    /*el-scrollbar 必须指定高度*/
    .scrollMenuBox {
        height: 200px;
        width: 100px;
        border: 1px solid red;
    }
 
    /*隐藏水平滚动条*/
    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
    }
</style>
相关推荐
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
SoraLuna4 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半8 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js