CSS定制的滚动条在div。

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

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

13 个解决方案

#1

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

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

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):

目前，没有跨浏览器滚动条CSS样式定义。我在结尾处提到的W3C文章有以下声明，并在最近更新(2014年10月10日星期五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-")

有些浏览器(比如Konqueror)支持非标准属性“scrollbar- shadowcolor”、“scrollbar- trackcolor”和其他。这些属性是非法的:它们既没有在任何CSS规范中定义，也没有被标记为专有(通过前缀“-供应商-”)

Microsoft

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

正如其他人所提到的，微软支持滚动条样式(示例)，但只支持IE8和以上。

• http://msdn.microsoft.com/en-us/library/ie/hh772048(v=vs.85).aspx
• http://msdn.microsoft.com/en-us/library/ie/hh772048(v = vs.85). aspx
• http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx
• http://msdn.microsoft.com/en-us/library/ff974092(v = VS.85). aspx

• Example:

  例子:

  .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:

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

• Styling scrollbars: https://www.webkit.org/blog/363/styling-scrollbars/
• 滚动条样式:https://www.webkit.org/blog/363/styling-scrollbars/
• Demo of all WebKit scroll bar styling
• 所有WebKit滚动条样式的演示。

• From Custom scrollbars in WebKit, relevant CSS:

  来自WebKit的自定义滚动条，相关的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
  

Firefox (Gecko)

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

Firefox没有自己的滚动条样式，所以从自定义的CSS Scrollbar到Firefox。

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

没有Gecko等于:-webkit-scrollbar和朋友。

You'll have to stick with jQuery.

你必须坚持使用jQuery。

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

很多人都喜欢这个功能，看看: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

这篇报告要求的是与你要求的完全相同的东西: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.

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

• 20 jQuery Scrollbar plugin with examples (July 24, 2012)
  • NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices
  • NiceScroll:用于桌面、移动和触摸设备的jQuery滚动插件。
  • jQuery custom content scroller
  • jQuery定制内容照片卷轴
  • Tiny Scrollbar – A lightweight jQuery plugin
  • 微型滚动条-一个轻量级的jQuery插件。
  • etc.
  • 等。
• 20 jQuery Scrollbar插件示例(2012年7月24日)NiceScroll:用于桌面的jQuery滚动插件，移动&触摸设备jQuery定制内容Scrollbar，一个轻量级jQuery插件等等。
• 30+ JavaScript/Ajax Techniques for Sliders, Scrollers and Scrollbars (May 07, 2008)
• 30+ JavaScript/Ajax技术用于滑块、滚动条和滚动条(2008年5月07日)
• 21 Useful Scrollbar CSS/JavaScript Styling Tutorials (August, 2012)
• 21有用的Scrollbar CSS/JavaScript样式教程(2012年8月)
• 15+ Free and Premium jQuery Scrolling Plugins (August 26, 2012)
• 15+免费和高级jQuery滚动插件(2012年8月26日)

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.

如果您想防止滚动条样式没有被正确的前缀“-供应商”，本文在W3C提供了一些基本的说明。基本上，您需要将以下CSS添加到与浏览器关联的用户样式表中。这些定义将在您访问的任何页面上覆盖无效的滚动条样式。

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

• Changing the scrollbars' style
• 改变滚动条的样式
• CSS scrollbar style cross browser
• CSS scrollbar风格的跨浏览器。
• How to create a custom scrollbar on a div (Facebook style)
• 如何在div (Facebook样式)上创建自定义滚动条

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

注意:这个答案包含来自不同来源的信息。如果一个源被使用，那么它也与这个答案联系在一起。

#2

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

自定义滚动条不可能使用CSS，你需要一些JavaScript魔法。

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.

一些浏览器支持非规范的CSS规则，例如:Webkit中的-webkit-scrollbar，但它并不理想，因为它只能在Webkit中工作。IE也有类似的功能，但我认为他们不再支持它了。

#3

Give this a try

尝试一下这个

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

来源: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.

它是一个“纯javascript”滚动条，所以您的滚动条是可以控制的，在不同的操作系统中看起来是一样的。

#4

I think there is one thing missing in this thread. If you would by any chance want to implement scrolling via plugin, by far the best one in 2014 is Sly.

我认为这条线缺少一件东西。如果你想要通过插件来实现滚动，到目前为止，2014年最好的是Sly。

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

它是一个纯javascript滚动条，所以您的滚动条是可以控制的，在不同的操作系统中看起来是一样的。

It has the best performance and features. No other even comes close. Don't waste time choosing from myriads of halfbaked buggy other libraries.

它具有最好的性能和特性。没有其他的人能接近。不要浪费时间去选择那些不太成熟的、乱七八糟的其他图书馆。

#5

I tried a lot of plugins, most of them don't support all browsers, I prefer iScroll and nanoScroller works for all these browsers :

我尝试了很多插件，大多数都不支持所有的浏览器，我更喜欢iScroll和nanoScroller为所有这些浏览器工作:

• IE11 -> IE6
• IE11 - > IE6
• IE10 - WP8
• IE10——WP8
• IE9 - WP7
• IE9,WP7
• IE Xbox One
• 例如Xbox一
• IE Xbox 360
• 例如Xbox 360
• Google Chrome
• 谷歌浏览器
• FireFox
• 火狐
• Opera
• 歌剧
• Safari
• Safari

But iScroll do not work with touch!

但是iScroll不工作与触摸!

demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

demo iScroll: http://lab.cubiq.org/iscroll/examples/simple/demo nanoScroller: http://jamesflorentino.github.io/nanoScrollerJS/。

#6

Here's a webkit example which works for Chrome and Safari:

这是一个webkit的例子，它适用于Chrome和Safari:

CSS:

CSS:

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

Output:

输出:

#7

Please check this link. Example with working demo

请检查这个链接。示例和演示工作

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

CSS Scroll Bars

CSS滚动条

#8

FYI, This is what google uses in some of it's applications since a long time ago. Check in the jsfiddle that if you apply next classes, they somehow hide the scrollbar in chrome but it's still works.

FYI，这是谷歌在很久以前的一些应用程序中使用的。在jsfiddle中检查一下，如果你应用下一个类，它们会在chrome中隐藏滚动条，但它仍然有效。

jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark

http://jsfiddle.net/76kcuem0/32/

http://jsfiddle.net/76kcuem0/32/

I just found it usefull to remove the arrows from the scrollbars. as of 2015 it's been used in maps.google.com when searching for places in the list of results in it's material design UI.

我刚发现它有用，可以从滚动条中移除箭头。截至2015年，它已经被应用于maps.google.com，搜索结果列表中的位置，在它的材料设计界面。

#9

Webkit scrollbar doesnt support on most of the browers.

Webkit滚动条不支持大多数浏览器。

Supports on CHROME

在CHROME支持

Here is a demo for webkit scrollbar Webkit Scrollbar DEMO

这是webkit scrollbar webkit scrollbar演示的一个演示。

If you are looking for more examples Check this More Examples

如果您正在寻找更多的例子，请查看更多的例子。

---

Another Method is Jquery Scroll Bar Plugin

另一种方法是Jquery滚动条插件。

It supports on all browsers and easy to apply

它支持所有浏览器，并易于应用。

Download the plugin from Download Here

从这里下载插件。

How to use and for more options CHECK THIS

如何使用和更多的选项检查这个?

DEMO

演示

#10

Like many people, I was looking for something that was:

和很多人一样，我在寻找一些东西:

• Consistently styled and functional across most modern browsers
• 在大多数现代浏览器中始终保持风格和功能。
• Not some ridiculous 3000-line bloated jQuery extension cr*p
• 没有什么可笑的3000line膨胀的jQuery扩展cr*p。

...But alas - nothing!

…但是唉——没有!

Well if a job's worth doing... I was able to get something up and running in about 30 mins. Disclaimer: there's quite a few known (and probably a few as yet unknown) problems with it, but it makes me wonder what on Earth the other 2920 lines of JS are there for in many offerings!

如果一份工作值得做……我能在大约30分钟内得到一些东西。免责声明:有相当多的(可能还有一些未知的)问题，但它让我想知道，在许多产品中，其他2920行JS到底是什么?

var dragParams;
	window.addEventListener('load', init_myscroll);

	/* TODO: Much to do for v axis! */

	function bardrag_mousemove(e) {
	  var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
	  pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
	  dragParams.slider.style.left = pos + 'px';
	  updateScrollPosition(dragParams.slider, pos);
	}

	function updateScrollPosition(slider, offsetVal) {
	  var bar = slider.parentNode;
	  var myscroll = bar.parentNode;
	  var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
	  var maxSlide = bar.offsetWidth - slider.offsetWidth;
	  var viewX = maxView * offsetVal / maxSlide;
	  myscroll.scrollLeft = viewX;
	  bar.style.left = viewX + 'px';
	}

	function drag_start(e) {
	  var slider = e.target;
	  var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
	  dragParams = {
	    clientX: e.clientX,
	    offsetLeft: slider.offsetLeft,
	    slider: e.target,
	    maxLeft: maxLeft
	  };
	  e.preventDefault();
	  document.addEventListener('mousemove', bardrag_mousemove);
	}

	function drag_end(e) {
	  e.stopPropagation();
	  document.removeEventListener('mousemove', bardrag_mousemove);
	}

	function bar_clicked(e) {
	  var bar = e.target;
	  var slider = bar.getElementsByClassName('slider')[0];
	  if (bar.className == 'h bar') {
	    var maxSlide = bar.offsetWidth - slider.offsetWidth;
	    var sliderX = e.offsetX - (slider.offsetWidth / 2);
	    sliderX = Math.max(0, Math.min(sliderX, maxSlide));
	    slider.style.left = sliderX + 'px';
	    updateScrollPosition(slider, sliderX);
	  }
	}

	function init_myscroll() {
	  var myscrolls = document.getElementsByClassName('container');
	  for (var i = 0; i < myscrolls.length; i++) {
	    var myscroll = myscrolls[i];
	    var style = window.getComputedStyle(myscroll);
	    if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
	      addScroller(false, myscroll);
	    }
	    if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
	      addScroller(true, myscroll);
	    }
	  }
	}

	function addScroller(isX, myscroll) {
	  myscroll.className += ' myscroll';
	  var bar = document.createElement('div');
	  var slider = document.createElement('div');
	  var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
	  var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
	  var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
	  slider.style.width = 100 * sliderPx / offsetDim + '%';
	  slider.className = 'slider';
	  bar.className = isX ? 'h bar' : 'v bar';
	  bar.appendChild(slider);
	  myscroll.appendChild(bar);

	  bar.addEventListener('click', bar_clicked);
	  slider.addEventListener('mousedown', drag_start);
	  slider.addEventListener('mouseup', drag_end);
	  bar.addEventListener('mouseup', drag_end);
	  document.addEventListener('mouseup', drag_end);
	}

body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}

<div class="container">
  <div></div>
</div>

#11

I tried a lot of JS and CSS scroll's and I found this was very easy to use and tested on IE and Safari and FF and worked fine

我尝试了很多JS和CSS的滚动条，我发现这在IE和Safari和FF上很容易使用和测试，而且效果很好。

AS @thebluefox suggests

@thebluefox表明

Here is how it works

下面是它的工作原理。

Add the below script to the

将下面的脚本添加到。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

And this here in the paragraph where you need to scroll

这段文字需要滚动。

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

For more details visit the plugin page

更多细节请访问插件页面。

FaceScroll Custom scrollbar

FaceScroll自定义滚动条

hope it help's

希望它帮助的

#12

.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

gave me a nice mobile/osx like one.

给了我一个很好的移动/osx系统。

#13

Or use somthing like this:

或者用这样的东西:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

And initialize:

并初始化:

<body onload="new MiniScroll(this);"></body>

And customize:

和自定义:

.scroll-place { // ... // }
.scroll { // ... // }