单页营销网站后台,网站推广策划书的共同特点有哪些,网页设计公司有什么部门,网思科技股份有限公司首先各个浏览器滚动条保持统一是不可能的#xff0c;因为浏览器不支持大多数滚动条样式属性 从支持可调整的角度来看#xff0c;我们一般选择 保持chrome样式#xff0c;其他浏览器样式使用默认效果保持chrome、火狐样式一致#xff0c;其他浏览器样式使用默认效果 所以这… 首先各个浏览器滚动条保持统一是不可能的因为浏览器不支持大多数滚动条样式属性 从支持可调整的角度来看我们一般选择 保持chrome样式其他浏览器样式使用默认效果保持chrome、火狐样式一致其他浏览器样式使用默认效果 所以这里有二个方案自行选择 方案一 保持chrome样式其他浏览器样式使用默认效果 通常采用这个方案 使用该方法就不要在非伪元素中使用 scrollbar-width:thin; 因为该属性会强行修改样式导致自定义样式没有效果虽然它在火狐浏览器中让滚动条好看苗条了些 /*定义整个滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar {width:10px;background-color:#F5F5F5; } /*定义滚动条轨道内阴影圆角*/ ::-webkit-scrollbar-track {background-color:#F5F5F5; } /*定义滑块内阴影圆角*/ ::-webkit-scrollbar-thumb {border-radius:10px;background-color:#555; }当然可以自己写滚动条不采用系统自带的当然比较麻烦吧 想搞一下的可以参考 有道文档翻译 阅读界面中滚动条效果 方案二 保持chrome、火狐样式一致其他浏览器样式使用默认效果 这种方法可调整样式固定没有圆角美感一般 ::-webkit-scrollbar {width: 6px;background-color: #eee; }::-webkit-scrollbar-thumb {background-color: #c1c1c1;:hover {background-color: #a8a8a8;}:active {background-color: #787878;} } {scrollbar-width: thin;scrollbar-color: #c1c1c1 #eee; }Firefox 火狐64位目前只提供了部分自定义滚动条的属性 scrollbar-width该属性可取值 scrollbar-width: auto; // 默认值 scrollbar-width: thin; // 比默认滚动条窄 scrollbar-width: none; // 不显示滚动条但是仍可以滚动scrollbar-color其可填写的值有 scrollbar-color: auto; // 默认值 scrollbar-color: dark; // 无效果 scrollbar-color: light; // 无效果 scrollbar-color: red green; // 第一个滚轮颜色第二个滚动条背景色