去掉滚动条样式

  .shu {
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    height: 3.8rem;
    overflow-y: auto;
}
  .shu::-webkit-scrollbar {/*滚动条整体样式*/
            width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 0px;
        }
        .shu::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 0px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        .shu::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
            }

原文地址:https://www.cnblogs.com/chenchenhao/p/10301971.html

时间: 2024-07-31 15:29:56

去掉滚动条样式的相关文章

网页滚动条样式知识

今天老板指出我做的网页的不足,说滚动条可以美化一下,我一听还有点纳闷,滚动条还可以变吗,第一次听说.后来去百度了下,果真有这方面东东,于是应用下来. webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. ::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条

【CSS3】自定义滚动条样式 -webkit-scrollbar

好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scrollbar.html webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-t

chorme和IE下的滚动条样式修改

火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css&q

CSS自定义滚动条样式

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下.当然,兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了. 这些样式规则很简单: scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立

overflow滚动条样式设置,ie和webkit内核

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <style> 8 body{ 9 /*ie下修改滚动条样式,在webkit内核浏览器无效*/ 10 /*scrollbar-arrow-color: #f4ae21;三角箭头的颜色

自定义滚动条样式

<style> /* * 控制ie 滚动条颜色 * scrollbar-face-color 滚动条颜色 */ div{ scrollbar-face-color: #DDDDDD; scrollbar-shadow-color: #DDDDDD; scrollbar-highlight-color: #DDDDDD; scrollbar-3dlight-color: #DDDDDD; scrollbar-darkshadow-color: #FFFFFF; scrollbar-base-co

css修改浏览器默认的滚动条样式

//滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { border-radius: 4px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color:#717270; } ::-webkit-scrollbar-track { border: 1px #d3d3d3 solid;

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

jQuery自定义滚动条样式插件mCustomScrollbar

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus