Scrollbar 能 styling 的东西不多 (尤其是 IOS 基本上只能 display:none 而已),但有时候我们不得不 styling。 这里记入我自己在项目中修改过的 scrollbar 经历。 参考 can i use webkit-scrollbar MDN – ::-webkit-scrollbar MDN – scrollbar-width MDN – scrollbar-color 例子 Gmail Scrollbar Gmail 的...
scrollbar-width 和scrollbar-color是 Firefox 滚动条样式的属性。scrollbar-width: thin;会使滚动条变细,而scrollbar-color用于定义滚动条的颜色。在这里,滚动条颜色被设置为灰色 (#999999),滚动条轨道的颜色被设置为淡灰色 (#f0f0f0)。 对于Webkit 内核的浏览器(如 Chrome 和 Safari),使用::-...
scrollbar-width和scrollbar-color是 Firefox 滚动条样式的属性。scrollbar-width: thin;会使滚动条变细,而scrollbar-color用于定义滚动条的颜色。在这里,滚动条颜色被设置为灰色 (#999999),滚动条轨道的颜色被设置为淡灰色 (#f0f0f0)。 对于Webkit 内核的浏览器(如 Chrome 和 Safari),使用::-webkit-scrollbar...
scrollbar-width和scrollbar-color是 Firefox 滚动条样式的属性。scrollbar-width: thin;会使滚动条变细,而scrollbar-color用于定义滚动条的颜色。在这里,滚动条颜色被设置为灰色 (#999999),滚动条轨道的颜色被设置为淡灰色 (#f0f0f0)。 对于Webkit 内核的浏览器(如 Chrome 和 Safari),使用::-webkit-scrollbar...
要在Firefox中单独设置滚动条样式,你可以使用@-moz-document规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。 下面是一个例子,演示如何在Firefox中隐藏滚动条: 代码语言:javascript 复制 @-moz-document url-prefix(){/* 在这里添加只对Firefox生效的样式 */body{scrollbar-width:none;}}...
::-webkit-scrollbar-corner 当同时含有垂直和水平方向的滚动条时它们的交叉部分。一般是元素的右下角。 eg:设置水平和垂直滚动条交叉部分的背景色。 .box::-webkit-scrollbar-corner{background-color:cyan;} ::-webkit-resizer 当元素设置为可拖动时(resize: horizontal | vertical | both),元素底角会出现可调...
用我们新学的知识创建一个暗色主题的滚动条,它的边框是圆形的(灵感来自 CSS Tricks 网站):html::-webkit-scrollbar { width: 20px; } html::-webkit-scrollbar-track { background-color: black; } html::-webkit-scrollbar-thumb { background: #4e4e4e; border-radius: 25px...
<html> <head> <title>MyExample</title> <!--CSS--> <style> /* Box styles */ .myBox{ border:none; padding:5px; font:24px/36pxsans-serif; width:200px; height:150px; overflow:scroll; } /* Scrollbar styles */
进入页面,打开控制台工具,选中其中一个样式,就能看到该样式的CSS源码。 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar {width:16px;height:16px;background-color:#F5F5F5; }/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track ...
既然要解决滚动条造成的问题那么首先需要了解滚动条,即scrollbar的信息主要就是他的宽度,我们把页面的overflow置为scroll,那么滚动条就会默认占据了空间,下面代码就可以很容易得到其宽度了: CSS: 先把body的间距置为0 * {margin:0;padding:0; }html{overflow-y: scroll; ...