css实现滚动条兼容mac和windows

要做到同时兼容windows和Mac，那么可以自定义滚动条，做法很简单，在全局的css样式中加入下面代码即可：

//自动移滚动条样式
::-webkit-scrollbar{width: 5px;height: 5px;
}
::-webkit-scrollbar-thumb{border-radius: 1em;background-color: rgba(50,50,50,.3);
}
::-webkit-scrollbar-track{border-radius: 1em;background-color: rgba(50,50,50,.1);
}

1、::-webkit-scrollbar 定义了滚动条整体的样式；
2、::-webkit-scrollbar-thumb 滑块部分；
3、::-webkit-scrollbar-track 轨道部分；

css实现滚动条兼容mac和windows相关推荐

移动硬盘的格式化——兼容Mac和Windows
格式化成exfat格式支持4g以上大文件且mac和windows都支持读写方法: 法1:Mac中操作 Mac中运行实用工具->磁盘工具,左侧选择磁盘,然后在抹掉栏中,选择exFAT格式如 ...
mac linux u盘兼容性,让U盘同时兼容MAC和Windows的实用对策
我们都知道在苹果电脑.Mac OS X 系统的HFS+和Windows 的NTFS格式是无法通用,因此很多人觉得想要让这三者之间实现通用是难上加难的事儿.其实,只要我们将U盘的格式进行转化,是否便能实 ...
css隐藏滚动条兼容IE，火狐，chrom
1.width多17px,外层容器溢出隐藏,能兼容各个浏览器. .outContainer {width:350px;height:300px;overflow: hidden; } .inConta ...
解决 Mac 与 windows 不兼容 word 的问题
今天写文档给老大,被老大骂了,因为 Mac 和 Windows 不兼容 doc 于是找软件解决发现了一款神器 MarkdownPad 刚看到他以为是个平板,结果发现 Windows 能用官网地址: ...
css隐藏滚动条、兼容
css隐藏滚动条 .scrollbar{scrollbar-width: none;-ms-overflow-style: none; } .scrollbar::-webkit-scrollbar ...
html css 水平滚动条,html/css/js-横向滚动条的实现
在前端UI设计时,网页的制作很麻烦,深有感悟!碰到太多的不懂,或是第一次见,就要去网上找资料!横向滚动条就是我遇到麻烦中其中的一个,其实也很简单,只是在几次项目中都用到了这个横向滚动条所以就拿出来说 ...
【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码简单粗暴,但是兼容性不 ...
CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 屏蔽IE浏览 ...
div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题收藏所有浏览器通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...

css实现滚动条兼容mac和windows

css实现滚动条兼容mac和windows相关推荐

最新文章

热门文章