有时候，对页面要求美观，但是默认滚动条太丑了，要修改一下。
在Chrome中，应该是这样，在style中加入一些代码即可，你也可以修改Chrome的custom.css文件，从而使所有页面的滚动条都有修改。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Chrome scroll</title>
<style type="text/css" media="screen">
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:3;
}
::-webkit-scrollbar{
width:15px;
height:8px;
}
::-webkit-scrollbar-thumb{
height:30px;
background-color:#999;
-webkit-border-radius:7px;
outline:2px solid #fff;
outline-offset:-2px;
border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
height:30px;
background-color:#9f9f9f;
-webkit-border-radius:8px;
}
ul {margin:0px; padding:0px; width:100px; height:200px; overflow-x:hidden; overflow-y:auto;}
</style>
</head>
<body>
<ul>
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
<li>cccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeeee</li>
<li>ffffffffffffff</li>
<li>aaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
<li>cccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeeee</li>
<li>bbbbbbbbbbbbbb</li>
<li>cccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeeee</li>
</body>
</html>
分享到：
相关推荐
Chrome 滚动条美化 原创 淡雅风格, 不仔细看看不出来, 而且类似透明效果 将文件复制到 win7系统: C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets windows xp类似: 到 C:\*******...
由扁平还原到立体的扩展，crx格式，适合Chrome和360极速浏览器等Chromium内核的浏览器。使用方法：拖动到Chrome的扩展管理页面中。
通过修改这些类的样式，可以实现与Mac上Chrome滚动条类似的外观。 需要注意的是，虽然`Perfect Scrollbar`提供了良好的兼容性和易用性，但在某些低版本浏览器或特定环境下可能存在问题。因此，在实际项目中使用时，...
需要注意的是，这些CSS3的滚动条样式目前仅在Webkit内核的浏览器（如Chrome、Safari）中支持，对于Firefox、Edge等其他浏览器，需要使用它们特定的语法，或者借助JavaScript库实现跨浏览器的滚动条美化。 六、...
传统的浏览器滚动条通常是浏览器自身提供的默认样式，但随着Web标准的发展，特别是CSS的进步，开发者现在可以使用CSS来自定义WebKit内核浏览器（例如Chrome和Safari）的滚动条样式，而不必依赖于非标准的扩展或...
JavaScript 自定义浏览器滚动条兼容 IE、火狐和 chrome 本文主要共享了使用原生 JavaScript 实现自定义浏览器滚动条兼容 IE、火狐和 chrome 的思路与方法。通过 JavaScript 实现自定义浏览器滚动条，可以实现跨...
这些选择器是WebKit引擎（包括Chrome和Safari）特有的，可以用来定制滚动条的样式。若要隐藏滚动条，我们可以在CSS中设置宽度为0： ```css ::-webkit-scrollbar { width: 0; /* 隐藏横向滚动条 */ } ::-webkit-...
在网页设计中，为了提升用户体验，设计师们常常会利用CSS（Cascading Style Sheets）来定制浏览器的滚动条...不过，随着IE浏览器逐渐被淘汰，开发者可能需要更多地关注对Chrome、Firefox等现代浏览器的滚动条样式支持。
然而，有时嵌入的网页内容尺寸可能会超过iframe的可视区域，这时浏览器会自动为iframe添加滚动条，以便用户能够滚动查看整个内容区域。虽然这对于某些情况可能是必要的，但在其他一些情况下，开发者可能希望去除滚动...
注意，这些CSS滚动条样式主要是基于WebKit的，所以它们在Safari和Chrome等基于WebKit的浏览器中工作良好，但不适用于Firefox和Internet Explorer。对于其他浏览器，可能需要使用JavaScript库或者特定的浏览器前缀...
目前，大多数自定义滚动条的样式仅在支持Webkit前缀的浏览器（如Chrome、Safari）中有效。所以，我们需要使用`-webkit-scrollbar`、`-webkit-scrollbar-thumb`、`-webkit-scrollbar-track`等属性来定义样式。 3. *...
这种技术尤其适用于现代浏览器，如Firefox和Chrome，它们提供了丰富的CSS支持以实现自定义滚动条样式。在本话题中，我们将深入探讨如何利用CSS、Stylus以及Firefox和Chrome的特定CSS扩展来实现重叠式滚动条。 首先...
总结来说，Flex布局中的滚动条实现主要分为默认滚动条和自定义滚动条两种方式。默认滚动条适用于快速开发，而自定义滚动条则能更好地融入到页面设计中，提供更一致的用户体验。需要注意的是，自定义滚动条的兼容性和...
首先，我们需要理解CSS3提供了对滚动条样式的一些控制，如`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素，但这些样式只在Webkit内核的浏览器（如Chrome、Safari）中有效。对于Firefox、IE/Edge等非...
但是，随着 CSS3 的发展，现代浏览器（如 Chrome、Firefox 和 Safari）引入了 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 等伪元素，使得我们可以自定义滚动条的外观。 以下是一些关键的 CSS 属性，...
在网页设计中，滚动条是不可或缺的元素，尤其是在内容超过屏幕显示范围时。HTML和CSS是构建网页的基础，其中HTML负责结构，CSS负责样式。本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式，...
- `::-webkit-scrollbar` 用于选择Webkit内核浏览器（如Chrome和Safari）的滚动条整体。 - `::-webkit-scrollbar-thumb` 选择滚动条上的滑块部分。 - `::-webkit-scrollbar-track` 选择滚动条的轨道部分。 - `::-...
CSS3引入了`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`伪元素，允许开发者对Webkit内核的浏览器（如Chrome和Safari）的滚动条进行样式定制。例如，以下代码可以将滚动条宽度设置为10px，滚动条轨道（即滚动...
在网页设计中，用户体验往往受到各种细节的影响，其中之一就是滚动条。一个美观且功能完善的滚动条可以提升网站的视觉效果和交互体验。本教程将深入探讨如何使用jQuery创建一款炫酷的滚动条效果，该效果代码简洁，...
为了改变这一情况，我们可以利用CSS3的伪元素`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`来定制滚动条的样式，但这仅限于Webkit内核的浏览器，如Chrome和Safari。对于Firefox、Edge等其他浏览器，我们需要...