浏览器窗口上的滚动条不是由网站本身，甚至通常不是由浏览器设置样式的。它们来自操作系统本身。
定制这些滚动条样式的需求很强烈。在刚开始时，感觉就像你应该能够使用 CSS 来做到这一点。如果搜索有关更改/自定义滚动条的 CSS，问题会变得更加复杂，你可能会找到它。问题在于，在 IE 5.5 中，存在专有的浏览器扩展程序，可以使用诸如“scrollbar-face-color”之类的属性来更改滚动条的外观。IE 5.5 已经很久远了，允许在 CSS 中进行这种控制的概念也随之消失了。
不过，在某些情况下，你强烈希望能够控制滚动条的外观。例如，当滚动条不是针对整个浏览器窗口时。页面上有一个小部分需要控制其高度，但包含的内容超出了容器。你可以将该容器的溢出设置为“auto”，并获得默认的滚动条。根据网站的设计，此滚动条可能看起来很笨拙，根本不可取。
幸运的是，我们可以利用 JavaScript 的强大功能来解决此问题，并再次完全控制滚动条的设计。基本原理是我们用隐藏的溢出创建一个新元素来包裹可滚动区域，然后我们从内部元素中移除溢出，使其可以根据需要变得足够高。然后我们添加我们自己的滚动条并监视其上的鼠标事件。当我们上下拖动它时，它会调整内部容器的相对顶部值，完美地复制滚动效果。
为了简化操作，我们将使用一个现有的 jQuery 插件：jScrollPane。
已测试并在 Fx3、Safari 4、IE 6 中正常工作。Opera 9.52 也可以工作，但在某些情况下会奇怪地触发常规的正文滚动条。
步骤 1：标记
<body>
<div id="page-wrap">
<div class="scroll-pane">
</div>
<img src="images/bottomshadow.png" alt="" class="bottomshadow" />
</div>
</body>我们在这里拥有 pagewrap 的唯一原因是我们正在居中我们的可滚动区域。由于插件会将该 div（带有“scroll-pane”类）包装到另一个 div 中，因此我们应用于它的任何居中操作只会将其居中到该新包装中，而不是主体本身。因此，与其弄乱它，我们只需将其再次包装在 page-wrap 中以进行基本定位和居中。我们还可以将相对定位应用于该包装，这将允许我们将阴影图形放置在其中并将其绝对定位在我们想要放置在底部的任何位置。
步骤 2：CSS
* { margin: 0; padding: 0; }
body { font-size: 12px; line-height: 30px; font-family: Georgia, serif;
background: url(../images/clown.jpg) top left no-repeat #fbfbfb; }
#page-wrap { width: 244px; margin: 50px auto; position: relative; }
.scroll-pane { width: 234px; overflow: auto; padding-right: 10px; height: 400px; }
.bottomshadow { position: absolute; top: 375px; left: -47px; z-index: 9999; }
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%;
background: url(../images/bar.jpg) top center repeat-y; padding: 3px; }
.jScrollPaneDrag { position: absolute; background: url(../images/ball.png) center center no-repeat;
cursor: pointer; overflow: hidden; }我们已经在这里介绍了大部分理论。值得关注的是 jScrollPaneTrack 和 jScrollPaneDrag。在这里，你可以控制滚动条和滚动句柄的外观。我将一条相当参差不齐的线用作轨道，并将一个小小的参差不齐的球体用作手柄。
步骤 3：激活 JavaScript
这里典型的插件激活。在页面上包含 jQuery，然后是插件，然后使用所需的参数调用插件的新函数。在我们的例子中，球体宽度为 12px，因此在调用函数时需要指定它。这就是此函数的工作方式。
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript">
$(function(){
$('.scroll-pane').jScrollPane({
scrollbarWidth: 12
});
});
</script>步骤 4：考虑可用性和可访问性
以这种方式移除标准滚动条时，会从用户那里移除一致性和约定。人们对滚动条之类的用户界面约定非常习惯，以至于他们可能会忽略你自定义的滚动条，甚至无法将其识别为滚动条。这显然是一个问题。如果你希望人们实际使用你的滚动条，你应该确保你的滚动条看起来像一个滚动条（本文中的示例在这方面可以得到极大的改进）。我当然不崇拜 Jakob Nielsen（尤其是他糟糕透顶的网站），但他有一篇关于滚动条标准的非常好的文章，以及自定义滚动条在哪些方面有效，哪些方面无效。
还要注意，标准滚动条具有一些内置的可访问性功能，而你的新自定义滚动条则没有。总体而言，这种插件方法很可靠。如果 JavaScript 关闭，你将只获得常规滚动条。如果 CSS 关闭，你将能够正常看到所有内容。如果两者都打开，你将获得你漂亮的滚动条，但你将无法使用传统方法（例如鼠标上的滚轮）向下滚动该区域。
在采用自定义方法之前，请务必考虑所有这些因素。我认为在许多设计情况下，操作系统标准的滚动条可能会破坏设计，因此自定义方法可能是正确的选择。
不知为何，在你的示例中，鼠标滚轮似乎不起作用，即使在 jScrollPane 页面上也能正常工作 :)
无论如何，不错的技巧；)
实际上……有一个原因：D jQuery 的鼠标滚轮插件丢失了 :P
感谢你的技巧，
现在我可以让 XP/Vista 滚动样式看起来像 OS X 了吗？
有趣的文章和技巧。如果谨慎使用。
我坚信要给内容留出呼吸的空间。如果它不适合页面上的容器，那么它可能应该有自己的页面。
Chris，我有一个相关性不大的问题。我通常使用 Mac 上的 FF 访问此网站，如果我向下滚动页面，点击一个链接，转到其他地方，然后点击后退按钮，我总是会被返回到页面的顶部，无论我之前在哪里。但是 Safari 从未未能将我带回我最初点击链接的页面上的位置。我不认为问题完全在于 FF，因为它在其他网站上不会发生。如果你知道为什么会这样，我很想知道。
你显然知道使用自己的滚动条所带来的严重可用性损失。因此，我甚至不会考虑更改滚动条。如果项目要求我这样做，则需要更改项目。
不错的文章，也是几年前我考虑过的事情，当时更改滚动条是“酷”的！但现在我绝对不会考虑更改它们，对我来说，更改主滚动条总是看起来很俗气，正如 Mike 所说，如果容器需要滚动，内容应该有自己的页面！
很高兴看到 JavaScript 继续像这样从 Flash 中获取功能。
我以为在网页设计中设置滚动条样式是大忌……对我来说似乎有点毫无意义。
我几个月来一直在寻找这种解决方案，你已经解决了它，甚至提供了我的项目所需的文件。
虽然我同意应该谨慎使用它，但它可以让你的可滚动框看起来很棒！
感谢 Chris。
虽然你说浏览器通常不会设置滚动框的样式，但在我的 Firefox 版本中，滚动条是黑色的。我正在使用它的自定义主题——我认为是 NightLaunch，这似乎控制着滚动条的样式。
这可能是你陈述的一个例外，但如果有一种方法可以通过主要由 CSS 组成的浏览器主题来实现它，那么肯定有一种方法可以使用浏览器专有样式来更改滚动条的样式？
无论如何，只是一个想法，你们怎么看？
顺便说一句，Chris，这又是一个很棒的帖子，信息量很大。我希望能够在一些新的设计中应用它！
由于可访问性的原因，我宁愿坚持使用普通的未设置皮肤的滚动条..我相信它是浏览器皮肤的一部分。而我们作为 Web 开发人员与此部分无关。如果我们能，我们就成了主题开发者了..
jScrollPane 的另一个很酷的功能是，您还可以包含 jquery.mousewheel.js 并在可滚动区域中使用鼠标滚轮。不过，它对 Opera 的支持不佳。
奇怪。我无法使用空格键或 Page Down 键来向下翻页。它在该网站的其他地方都能正常工作，只是在这篇文章中不行。你把我的电脑搞坏了！哈哈
{:firefox 3.0.1; :mac os 10.5.2}
不错的技巧。
很遗憾，没有真正（即，不使用 JavaScript，并且滚动正常工作）的方法可以通过 CSS 实现这一点。我相信在 IE6 中可以使用 scrollbar-base-color 等方式实现，但现在这种方法已经过时了。他们可能试图保持滚动条尽可能一致，但我认为最好允许人们自定义它们（实际上只需要两个图像，背景和条形）。
我认为占用滚动条样式并不是什么大罪，尤其是在考虑到 OSX 和 XP 滚动条的不同宽度（更不用说其他任何操作系统）的情况下。如果您的网站正文中包含滚动条，则操作系统的默认滚动条可能会非常刺眼。我确实同意我希望有一种纯 CSS 的方法来实现这一点。
但是，虽然我很想使用这个技巧，但我倾向于更多地使用 MooTools 而不是 jQuery。 MooScroll 执行相同的滚动交换技巧。如果其他人也有类似的框架偏好，我建议您查看一下；我一直想使用它，并且终于找到了一个可以用来测试的网站。 :)
是否有可能让内容区域水平滚动而不是垂直滚动？
感谢您的帮助。
Vadim。
感谢您的文件。哦，是的，恭喜您在 delicious.com 上名列前茅。
继续努力。
谢谢 Chris。我不明白为什么这么多网页设计师对设计“规则”如此拘泥。这是我的简单规则：如果看起来不错，就去做。如果不是，就不要使用它。规则是创新的敌人。
@Jackie，因为我们大多数人都是为需要销售产品/服务的客户开发网站来谋生。许多这些“规则”都是有充分理由存在的。您使网站的使用越困难，获得转化的机会就越快减少。用户会停止关注内容和信息，而被界面分散注意力。
我能想到的很少有理由愿意更改网站上的滚动条。在大多数情况下，我讨厌将它们放在窗口右侧边缘以外的任何地方。
在浏览器窗口本身拥有“普通”的滚动条是可以的，为什么要更改用户浏览器的外观？这具有侵入性，令人恼火，而且人们就是不喜欢它。您为什么认为微软从 IE 中删除了它？
但是，如果网站内部有可滚动的容器，更改滚动条是有意义的。为了品牌推广的目的，您肯定希望它与您的网站融为一体。没有什么比将看起来奇怪的颜色（与您精心设计和编码的网站格格不入）放置到您的网站中更糟糕的了。
这个不错，但另一种方法是使用 mootools 和 UvumiTools 滚动条插件。无需在 javascript 中进行任何操作，并且鼠标滚轮可以开箱即用，无需添加额外的脚本。此外，对于使用其他框架的人来说，它也很不错。
相反，您可以完全放弃可滚动的容器，但我知道在某些网站中它是必要的。
我还有另一个解决方案。每次在我的网站中需要可滚动区域时，我都会使用它。它基于 mootools，名称为 ScrollControll。还有一个适用于 motools 1.2 的第二个版本。
在我的网站上有一个简短的描述，但只有德语，所以这里有一个 示例。尝试一下，玩得开心 :-)
几天前，我注意到一个网站使用了这种技术来自定义滚动条。这是我第一次真正注意到它可以通过 CSS 和 JS 实现。
但这种新奇感在大约 2 秒后就消失了，我发现自己越来越厌烦它，因为我的鼠标滚轮无法与它配合使用。
我认为提供这种选项很好，但我强烈反对在任何希望得到我尊重的网站上使用它。我相信滚动条以及表单元素都应该与用户操作系统的滚动条和表单元素紧密匹配。出于这个原因，我尽量将修改降到最低。普通用户更容易识别熟悉的元素。设计非常重要，但可用性也同样重要。
我并不是批评你发布此内容，我只是在发表一个一般性的声明，即网站应该符合某些标准。
但我很感谢你发布了这个脚本，因为我很好奇想看看它是如何实现的。感谢你。
不错的工作！但是对于内容区域的 100% 宽度怎么办？