前端项目修改默认滚动条样式

douzifly 发布于2019-08-30 15:44 / 1094人阅读

摘要：滚动条的背景滚动条的滑块样式修改这个算很齐全的修改下边这个很精简。值得一试这个的优点在于鼠标移上才会显示修改的滚动条体验很好提示下隐藏某轴的滚动条代码写法之前我以为是半天没变化

前端项目修改默认滚动条样式

写过挺多项目都需要改变滚动条的默认样式并不想多带带下载和引入插件因此纯css修改默认滚动条的样式这次算统一整理下方法，直接上代码。

            &::-webkit-scrollbar {
              // 滚动条的背景
              width: 16px;
              background: #191a37;
              height: 14px;
            }

            &::-webkit-scrollbar-track,
            &::-webkit-scrollbar-thumb {
              border-radius: 999px;
              width: 20px;
              border: 5px solid transparent;
            }

            &::-webkit-scrollbar-track {
              box-shadow: 1px 1px 5px #191a37 inset;
            }

            &::-webkit-scrollbar-thumb {
              //滚动条的滑块样式修改
              width: 20px;
              min-height: 20px;
              background-clip: content-box;
              box-shadow: 0 0 0 5px #464f70 inset;
            }

            &::-webkit-scrollbar-corner {
              background: #191a37;
            }

这个算很齐全的修改

下边这个很精简。值得一试

            &::-webkit-scrollbar {
              width: 6px;
              height: 6px;
              background: transparent;
            }

            &::-webkit-scrollbar-thumb {
              background: transparent;
              border-radius: 4px;
            }

            &:hover::-webkit-scrollbar-thumb {
              background: hsla(0, 0%, 53%, 0.4);
            }

            &:hover::-webkit-scrollbar-track {
              background: hsla(0, 0%, 53%, 0.1);
            }

这个的优点在于鼠标移上才会显示修改的滚动条体验很好

（提示下隐藏某轴的滚动条代码写法）

overflow-x:hidden;

之前我以为是 none,半天没变化

GPU云服务器云服务器滚动条样式 asp 滚动条样式默认样式滚动条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116171.html

前端项目修改默认滚动条样式

摘要：滚动条的背景滚动条的滑块样式修改这个算很齐全的修改下边这个很精简。值得一试这个的优点在于鼠标移上才会显示修改的滚动条体验很好提示下隐藏某轴的滚动条代码写法之前我以为是半天没变化前端项目修改默认滚动条样式写过挺多项目都需要改变滚动条的默认样式并不想单独下载和引入插件因此纯css修改默认滚动条的样式这次算统一整理下方法，直接上代码。 &::-webkit...

yearsj 2019-08-26 10:32 评论0 收藏0
css3修改浏览器scroll默认样式

摘要：最近公司的新项目。前端样式采用的蚂蚁金服的。比较喜欢一类简约大方的前端样式库。但是在页面布局上包括一些选择框。默认的样式简直丑爆。遂度娘资料，通过进行修改。最近公司的新项目。前端样式采用的蚂蚁金服的antDesign。比较喜欢antDesign、BootStrap一类简约大方的前端样式库。但是在页面布局上、包括一些选择框。默认的scroll样式简直丑爆。遂度娘资料，通过css3进行修改...

whjin 2019-04-23 11:47 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
[译] 前端项目中常见的 CSS 问题

摘要：我们的例子中有个卡片项目，看起来没什么问题。这将改善移动端的用户体验，并使用户更容易访问。大图预览结论这里提到的所有问题都是我在前端开发工作中最常遇到的。你在中有没有经常遇到什么问题呢欢迎在评论区分享原文地址：Common CSS Issues For Front-End Projects 原文作者：Ahmad Shadeed 译者：Chor 快速摘要：近年来，跨浏览器的渲染和...

AbnerMing 2019-08-02 15:21 评论0 收藏0
[译] 前端项目中常见的 CSS 问题

摘要：我们的例子中有个卡片项目，看起来没什么问题。这将改善移动端的用户体验，并使用户更容易访问。大图预览结论这里提到的所有问题都是我在前端开发工作中最常遇到的。你在中有没有经常遇到什么问题呢欢迎在评论区分享原文地址：Common CSS Issues For Front-End Projects 原文作者：Ahmad Shadeed 译者：Chor 快速摘要：近年来，跨浏览器的渲染和...

whatsns 2019-08-30 11:13 评论0 收藏0