我如何通过CSS（层叠样式表）为一个div定制滚动条，而不是整个页面？

I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility.

Scroll Bar CSS Support

Currently, there exists no cross-browser scroll bar CSS styling definitions. The W3C article I mention at the end has the following statement and was recently updated (Fri 10 Oct 2014 03:09:48 PM CEST):

Some browsers (IE, Konqueror) support the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-")

Microsoft

As others have mentioned, Microsoft supports scroll bar styling (example) but, only for IE8 and above.

.TA {
    scrollbar-3dlight-color:gold;
    scrollbar-arrow-color:blue;
    scrollbar-base-color:;
    scrollbar-darkshadow-color:blue;
    scrollbar-face-color:;
    scrollbar-highlight-color:;
    scrollbar-shadow-color:
}

Chrome & Safari (WebKit)

Similarly, WebKit now has its own version:

/* pseudo elements */
::-webkit-scrollbar              {  }
::-webkit-scrollbar-button       {  }
::-webkit-scrollbar-track        {  }
::-webkit-scrollbar-track-piece  {  }
::-webkit-scrollbar-thumb        {  }
::-webkit-scrollbar-corner       {  }
::-webkit-resizer                {  }

/* pseudo class selectors */
:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Firefox (Gecko)

Firefox does not have its own version of scroll bar styles according to this SO answer from Custom CSS Scrollbar for Firefox.

There's no Gecko equivalent to ::-webkit-scrollbar and friends.

You'll have to stick with jQuery.

Plenty of people would like this feature, see:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790

This report is asking for the exact same thing you're asking for: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Cross-browser Scroll Bar Styling

JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.

The list could go on. Your best bet is to search around, research, and test the available solutions. I am sure you will be able to find something that will fit your needs.

Prevent Illegal Scroll Bar Styling

Just in case you want to prevent scroll bar styling that hasn't been properly prefixed with "-vendor", this article over at W3C provides some basic instructions. Basically, you'll need to add the following CSS to a user style sheet associated with your browser. These definitions will override invalid scroll bar styling on any page you visit.

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Duplicate or Similar Questions / Source Not Linked Above

Note: This answer contains information from various sources. If a source was used, then it is also linked in this answer.

Custom scroll bars aren't possible with CSS, you'll need some JavaScript magic.

Some browsers support non-spec CSS rules, such as ::-webkit-scrollbar in Webkit but is not ideal since it'll only work in Webkit. IE had something like that too, but I don't think they support it anymore.

Give this a try

Source : http://areaaperta.com/nicescroll/

Simple Implementation

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

It is a "pure javascript" scrollbar, so your scrollbars are controllable and look the same across the various OS's.

上一篇: 设计一个类似于Twitter对话界面的内部滚动条？

下一篇: 在div中CSS自定义滚动条