div中的CSS自定义滚动条 [英] CSS customized scroll bar in div

问题描述

如何通过 CSS(层叠样式表)为一个 div 而不是整个页面自定义滚动条?

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page?

推荐答案

我认为整合有关滚动条、CSS 和浏览器兼容性的最新信息会很有帮助.

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

目前，没有跨浏览器滚动条 CSS 样式定义.我在最后提到的 W3C 文章有以下声明并且最近更新(2014 年 10 月 10 日):

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 (10 Oct 2014):

某些浏览器(IE、Konqueror)支持非标准属性scrollbar-shadow-color"、scrollbar-track-color"等.这些属性是非法的:它们既没有在任何 CSS 规范中定义，也没有标记为专有(通过在它们前面加上-vendor-")

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 支持滚动条样式，但仅适用于 IE8 及更高版本.

Microsoft

As others have mentioned, Microsoft supports scroll bar styling, 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:
}

铬 &Safari (WebKit)

同样，WebKit 现在有了自己的版本:

Chrome & Safari (WebKit)

Similarly, WebKit now has its own version:

• 样式滚动条:https://www.webkit.org/博客/363/styling-scrollbars/

所有 WebKit 的演示滚动条样式

来自 WebKit 中的自定义滚动条，相关 CSS:

From Custom scrollbars in WebKit, relevant CSS:

 /* 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

从 64 版开始，Firefox 支持通过属性 scrollbar-color(部分地，W3C 草案) 和 scrollbar-width (W3C 草案).在这个答案中可以找到有关实施的一些很好的信息.

As of version 64 Firefox supports scrollbar styling through the properties scrollbar-color (partially, W3C draft) and scrollbar-width (W3C draft). Some good information about the implementation can be found in this answer.

JavaScript 库和插件可以提供跨浏览器的解决方案.有很多选择.

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

• 20 个带有示例的 jQuery 滚动条插件(7 月24, 2012)
  • NiceScroll :适用于桌面、移动设备和移动设备的 jQuery 滚动插件触摸设备
  • jQuery 自定义内容滚动条
  • Tiny Scrollbar – 轻量级 jQuery 插件
  • 等
  • 20 jQuery Scrollbar plugin with examples (July 24, 2012)
    • NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices
    • jQuery custom content scroller
    • Tiny Scrollbar – A lightweight jQuery plugin
    • etc.

    名单可以继续.最好的办法是搜索、研究和测试可用的解决方案.我相信你会找到适合你需要的东西.

    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.

    以防万一您想阻止未正确添加-vendor"前缀的滚动条样式，W3C 上的这篇文章提供了一些基本说明.基本上，您需要将以下 CSS 添加到与浏览器关联的用户样式表中.这些定义将覆盖您访问的任何页面上的无效滚动条样式.

    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;
    }
    

    上面没有链接的重复或类似问题/来源

    • 更改滚动条的样式
    • CSS 滚动条样式跨浏览器
    • 如何在 div 上创建自定义滚动条 (Facebook风格)

    注意:此答案包含来自各种来源的信息.如果使用了来源，则此答案中也会链接它.

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

    这篇关于div中的CSS自定义滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！