div中的CSS自定义滚动条

Question

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

Answer 1

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

滚动条CSS支持

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

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

微软

正如其他人所提到的,Microsoft支持滚动条样式,但仅适用于IE8及更高版本.

例:

<!-- language: lang-css -->

    .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(Gecko)

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

跨浏览器滚动条样式

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

• 20个带有示例的jQuery Scrollbar插件(2012年7月24日)
  • NiceScroll:用于桌面,移动和触摸设备的jQuery Scrolling插件
  • jQuery自定义内容滚动条
  • Tiny Scrollbar - 一个轻量级的jQuery插件
  • 等等
• 适用于滑块,滚动条和滚动条的30多种JavaScript/Ajax技术(2008年5月7日)
• 21个有用的Scrollbar CSS/JavaScript样式教程(2012年8月)
• 15+免费和高级jQuery滚动插件(2012年8月26日)

这份名单可以继续使用.您最好的选择是搜索,研究和测试可用的解决方案.我相信你能找到适合你需求的东西.

防止非法滚动条样式

如果您想要防止没有正确添加"-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风格)

注意:此答案包含各种来源的信息.如果使用了源,那么它也会在此答案中链接.

Answer 2

试一试

资料来源:http://areaaperta.com/nicescroll/

简单实施

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

它是一个jQuery插件滚动条,因此您的滚动条是可控的,并且在各种操作系统中看起来相同.

Answer 3

使用CSS无法实现自定义滚动条,您需要一些JavaScript魔法.

有些浏览器支持非规范的CSS规则,例如::-webkit-scrollbar在Webkit中,但不是理想的,因为它只能在Webkit中使用.IE也有这样的东西,但我认为他们不再支持它了.

Answer 4

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

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

但 iScroll无法使用触控功能!

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

Answer 5

像许多人一样，我一直在寻找这样的东西：

• 在大多数现代浏览器中风格一致且功能正常
• 不是一些荒谬的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 6

请检查此链接。工作演示示例

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

    .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 之类的。