在div中CSS自定义滚动条

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

Answer 1

我认为这将有助于巩固关于滚动条，CSS和浏览器兼容性的最新信息。

滚动条CSS支持

目前，不存在跨浏览器的滚动条CSS样式定义。 我最后提到的W3C文章有以下声明，最近更新（2014年10月10日星期五03:09:48 CEST）：

一些浏览器（IE，Konqueror）支持非标准属性'scrollbar-shadow-color'，'scrollbar-track-color'等。 这些属性是非法的：它们既没有在CSS规范中定义，也没有被标记为专有（通过在“-vendor-”之前加前缀）

微软

正如其他人所说， 微软支持滚动条样式 （ 例如 ），但只适用于IE8及以上版本。

• 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

• 例：

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

同样，webkit现在有自己的版本：

• 造型滚动条： https ： //www.webkit.org/blog/363/styling-scrollbars/
• 所有webkit滚动条样式的演示

• 从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（壁虎）

Firefox 根据自定义CSS Scrollbar for Firefox的 回答 ，没有自己的滚动条样式版本。

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

你必须坚持使用jQuery。

很多人会喜欢这个function，请看：
https://bugzilla.mozilla.org/show_bug.cgi?id=77790

这份报告要求您要求完全相同的内容： https ： //bugzilla.mozilla.org/show_bug.cgi？id = 547260

跨浏览器的滚动条样式

JavaScript库和插件可以提供一个跨浏览器的解决scheme。 有很多select。

• 20 jQuery滚动条插件示例 （2012年7月24日）
  • NiceScroll：用于桌面，移动和触摸设备的jQuery滚动插件
  • jQuery自定义内容滚动
  • 微小的滚动条 – 一个轻量级的jQuery插件
  • 等等
• 30多个Javascript / Ajax技术的滑块，滚轮和滚动条 （2008年5月7日）
• 21有用的滚动条CSS / JavaScript样式教程 （2012年8月）
• 15 +免费和高级jQuery滚动插件 （2012年8月26日）

名单可以继续。 你最好的select是search，研究和testing可用的解决scheme。 我相信你将能够find适合你需求的东西。

防止非法的滚动条样式

万一你想防止没有正确加上“-vendor”前缀的滚动条样式， 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; } 

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

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

注意：这个答案包含来自不同来源的信息。 如果使用源，那么它也链接在这个答案。

Answer 2

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

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

Answer 3

试试这个

来源： http : //areaaperta.com/nicescroll/

简单的实现

 <script type="text/javascript"> $(document).ready( function() { $("html").niceScroll(); } ); </script> 

这是一个“纯粹的JavaScript”滚动条，所以你的滚动条是可控的，在不同的操作系统中看起来是一样的。

Answer 4

我觉得在这个线程中缺less一件事。 如果你想通过插件实现滚动，到目前为止，2014年最好的是Sly 。

这是一个纯粹的JavaScript滚动条，所以你的滚动条是可控的，并且在不同的操作系统中看起来是一样的。

它有最好的性能和function。 没有其他人甚至接近。 不要浪费时间从无数的半边马车select其他图书馆。

Answer 5

我尝试了很多插件，其中大多数不支持所有浏览器，我更喜欢iScroll和nanoScroller适用于所有这些浏览器：

• IE11 – > IE6
• IE10 – WP8
• IE9 – WP7
• IE Xbox One
• IE Xbox 360
• 谷歌浏览器
• 火狐
• 歌剧
• 苹果浏览器

但 iScroll不能使用触摸！

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

Answer 6

以下是适用于Chrome和Safari的webkit示例：

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

输出：

Answer 7

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

  #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滚动条

Answer 8

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

支持CHROME

这里是一个webkit的滚动Webkit滚动条演示演示

如果你正在寻找更多的例子检查这个更多的例子

---

另一种方法是JQuery的滚动条插件

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

从这里下载下载插件

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

DEMO

Answer 9

我知道我不应该做广告，但是我已经做了一个小而优雅的方式来添加滚动条到你的内容和样式。

它是完全免费的，你可以用它做任何你想要的：

你可以在这里find它的网站（www.customhtmlscroll.com）

这是非常简单的实施，很容易风格。

我希望有人可以用它来打造他们的页面，这就是我所做的。

Answer 10

仅供参考，这是谷歌很久以前在其一些应用程序中使用的。 检查jsfiddle，如果你申请下一个class，他们以某种方式隐藏在铬滚动条，但它仍然工作。

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

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

我刚刚发现它是有用的从滚动条中删除箭头。 截至2015年，当在其材料devise用户界面中search结果列表中的地方时，它已被用于maps.google.com。

Answer 11

像许多人一样，我正在寻找的东西是：

• 在大多数现代浏览器中一贯的风格和function
• 没有一些荒谬的3000行臃肿的jQuery扩展cr * p

…但是，唉 – 什么都没有！

那么，如果一项工作值得去做，我可以在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> 

Answer 12

我尝试了很多的JS和CSS滚动的，我发现这是非常容易使用和IE浏览器和Safari和FFtesting和工作正常

AS @thebluefoxbuild议

下面是它的工作原理

将下面的脚本添加到

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

这在这里你需要滚动的段落

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

有关更多详细信息，请访问插件页面

FaceScroll自定义滚动条

希望它的帮助

Answer 13

或者使用像这样的东西：

 var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(ac.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?bd: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}}; 

并初始化：

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

并定制：

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

Answer 14

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

给了我一个不错的移动/ osx像一个。