河南seo网站策划,服务器租用云服务器,泰安电视台在线直播,wordpress xamppel-scrollbar 滚动条组件用于优化页内滚动条的UI效果#xff0c;使用时必须指定高度#xff01;
/*el-scrollbar 必须指定高度*/
.scrollMenuBox {height: 200px;width: 100px;border: 1px solid red;
}
控制el-scrollbar内滚动条的方法与控制页面的滚动条的方法基本一样使用时必须指定高度
/*el-scrollbar 必须指定高度*/
.scrollMenuBox {height: 200px;width: 100px;border: 1px solid red;
}
控制el-scrollbar内滚动条的方法与控制页面的滚动条的方法基本一样只是获取el-scrollbar节点的滚动条时需使用 this.$refs.scrollMenuRef.wrap
el-scrollbar refscrollMenuRef classscrollMenuBoxp v-fori in titleTotal :keyi标题{{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
}, 完整范例代码 templatediv stylepadding: 20pxdiv classmenuBoxbutton clickscrollTo(25)目录滚动到标题25/buttonbrbutton clickgetScrollTop获取目录内滚动条向下滚动的距离/buttonhrp目录/pel-scrollbar refscrollMenuRef classscrollMenuBoxp v-fori in titleTotal :keyi标题{{i}}/p/el-scrollbar/divdiv classcontentBoxp v-fori in rowTotal :keyi第{{i}}行/p/div/div
/template
scriptexport 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
