前端vue项目最强优化-美化浏览器右侧滚动条样式与el-scrollbar

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难

🔎 了解博主

📢 个人简介: 哈喽！小伙伴们，我是水香木鱼，水瓶座一枚 😜 来自于黑龙江庆安
🏡 本站首页: 水香木鱼
🎨 系列专栏：邂逅css3
📖 人生格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。
🌏 小目标: 成为前端界、UI视觉界布道师

🚁相信期待新内容的小伙伴们，都已迫不及待了；因为工作的原因，近期可能会忙一些，那木鱼在这里，尽量每周更新2篇以上精品文章，呈现给为了生活拼搏的前端的小伙伴们。

📑 文章内容

一、美化浏览器自带右侧滚动条

在这里插入图片描述
BeautifyScrollBar.less

文中的 @remvw:1920 /100vw; 为根据1920屏幕分辨率去进行视口宽度适配【前提必须使用样式文件后缀为.less 进行编译后，@remvw:1920 /100vw;才会生效。】

详细页面适配，请移步此处

/*BeautifyScrollBar.less*/
/* 屏幕分辨率适配(视口)*/
@remvw:1920 /100vw;

::-webkit-scrollbar {
  width: 10 / @remvw; /*对垂直流动条有效*/
  height: 10 / @remvw; /*对水平流动条有效*/
}
/*定义外层滚动槽*/
::-webkit-scrollbar-track-piece {
  background-color: #bfbfbf;
  border-radius: 6 / @remvw;
}

/*定义内层 滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 6 / @remvw;
  background-color: #629EAB;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #1890ff;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  display: none;
}

/*定义边角样式*/
::-webkit-scrollbar-corner {
  display: none;
}

二、element-ui 隐藏组件 el-scrollbar 美化滚动条

<el-scrollbar></el-scrollbar>

修改默认的组件样式：

::v-deep .page-scroll {
   height: 100%;
}
::v-deep .page-scroll .el-scrollbar__wrap {
   overflow-x: hidden;
}

此处组件需要小伙伴们，亲自去尝试，才能知道。有不明白的地方，欢迎大家在评论区留言。

博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了前端vue项目最强优化-美化浏览器右侧滚动条样式与el-scrollbar，希望可以帮到大家，谢谢。

👉 如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟

😛 您的支持就是我更新的最大动力。👇

往期精彩

UI设计指南之可视化大屏【快速理解版】

前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】

vue实现导航器效果【vue+less+适配效果】

前端css解决背景图、图片自适应的问题【通用】

前端css解决z-index 上层元素遮挡下层元素的方法