最近在一些博客看到侧边栏某些板块,随着滚动条的滑动,而跟着滑动或者固定的效果,感觉非常的人性化,一来可以弥补当一个页面很长,但侧边栏太短的 时候的空白,二来可以合理利用空间展示更多信息,可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的),还有 适合于广告联盟的展示。
在翻看element-ui官网的文档时,发现其左侧导航和右边的内容超出屏幕时,滚动条的样式比较小巧,通过浏览器审查工具查看,发现它是使用了el-scrollbar的样式,跟element-ui的组件样式命名一致。但文档中并没有关于这个 scrollbar组件的使用文档,搜索一番得知这是一个隐藏组件,官方在 github 的 issues 中表示不会写在文档...
我们可以看到垂直滚动条的样式已经发生变化了,我们引用了element-ui的组件<el-scrollbar></el-scrollbar>这个组件对超过高度的内容进行了包裹。 在element-ui(2.xx.xx)官网上,并没有找到有这个组件,实际上是有的,没有给出对应组件对应的文档,可能组件在设计的时候没有更好的完善吧。下载对应源码,看到是有这个组...
是一种用户界面组件,用于在网页或应用程序中创建具有滚动功能的下拉菜单。它可以在菜单项较多时提供更好的用户体验,使用户能够方便地浏览和选择菜单项。 该组件的主要特点和优势包括: 1. 滚动功能:可滚动...
修改滚动条样式 css // 设置滚动条的宽度 .el-table__body-wrapper::-webkit-scrollbar { width: 4px; } // 设置滚动条的背景色和圆角 .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #535353; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius:...
注意事项:el-scrollbar 属于一个底层的公共组建,在 element 的包含的组建中,好多都依赖了这个滚动条组建,所有一般不建议修改原始的CSS样式,如果要修改,可以套一个div,让样式效果只作用在当前标签内 详细案例# 1 2 3 4 5 6 7 8 9 10 11 <el-scrollbar ...
隐藏水平滚动条 使用scoped 时,需用 /deep/ 实现样式穿透 /deep/ .el-scrollbar__wrap {overflow-x: hidden;} el-scrollbar 内滚动条跟随页面一起滚动 mounted() {// 监听浏览器/页面滚动条的滚动window.addEventListener("scroll", this.scrollContent);}, ...
在使用vue + element-ui搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。 使用的原因: 原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。
使用该组件的时候需要给其一个高度,它毕竟是滚动条组件,高度是对它最起码的尊重。组件默认overflow为:scroll,如果需要去掉横向滚动条可以设置overflow-x样式。 Attribute html ...内容...<!-- element垂直滚动条 native 为 true 时不出现 --><!-- element水平滚动条 native 为 true 时不出现...
element-ui表格滚动条样式el-scrollbar使用问题 实现效果: 问题如下图,原始表格滚动条很丑 想要的效果如下 操作步骤 1、template部分代码 <template><!-- 外面的最大的父容器盒子 --><!-- 使用el-scrollbar标签的效果 --><!-- 隐藏标签scrollbar包住所有滚动内容 --><el-scrollbar><el-table:data="table...