在Internet Explorer中调整滚动条宽度

Question

在Internet Explorer中调整滚动条宽度

htmlcssinternet-explorer

7

我是新来的stackoverflow用户。

我需要调整滚动条的宽度和高度。

我尝试了很多方法，只能改变它的颜色而不能改变大小。

- jayasiinput

发布一些代码或创建一个fiddle。 - Richa

1

什么滚动条？原生的那个吗？我认为你不能改变它。 - putvande

谢谢您的回复，我找不到任何代码，但在Chrome中我可以使用以下内容：::-webkit-scrollbar { width: 12px; }::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } - jayasiinput

为此，您需要使用一些Javascript。IE没有像基于Webkit的浏览器那样具有任何本地代码。 - bulanmaster

可以贴一些代码吗？ - jayasiinput

2个回答

4

除了基于WebKit的浏览器（Google Chrome、Safari、新版Opera）外，没有CSS方法可以更改浏览器滚动条的样式。因此，为了创建自定义滚动条，您需要使用JS模拟它。有许多jQuery插件-有些更好，有些更糟，有些符合您的需求，有些不符合。请尝试这些：jQuery Scrollbar, jScrollPane, Malihu Custom Scrollbar。

- Gromo

谢谢，我会尝试并回来告诉结果。 - jayasiinput

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frank · Accepted Answer

虽然这是一个相当老的问题。MSIE有一个功能，可以在不使用时隐藏滚动条。这非常类似于OSX Lion引入的滚动条。纯CSS，无JS。

  body {

  scrollbar-base-color: #222;
  scrollbar-3dlight-color: #222;
  scrollbar-highlight-color: #222;
  scrollbar-track-color: #3e3e42;
  scrollbar-arrow-color: #111;
  scrollbar-shadow-color: #222;
  scrollbar-dark-shadow-color: #222; 
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

上面的示例展示了如何在MSIE中添加自定义滚动条，并使用 -ms-autohiding-scrollbar 属性在失去焦点时隐藏它们。

注意 - 您可以通过针对 #id 或 .class 而不是 body 来为站点的不同部分设置不同的滚动条行为。