HomeQuestionBlogAboutMessageToolbox
English

div中的CSS自定义滚动条

小哥JinJinGil2020-03-23

如何通过CSS（级联样式表）为一个div页面而不是整个页面自定义滚动条？

十三2020/03/23 11:10:03

或使用类似这样的东西：

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

并初始化：

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

并自定义：

.scroll-place { // ... // }
.scroll { // ... // }
JinJin2020/03/23 11:10:03

对于仍在寻找好的解决方案的人们，我就找出了这个插件simplebar

具有本地滚动功能的自定义滚动条香草JavaScript库，操作简单，轻巧，易于使用且跨浏览器。

就我而言，我正在寻找reactJS解决方案，作者还提供了React，Angular，Vue和下一个示例的包装器

伽罗理查德2020/03/23 11:10:03

Webkit浏览器（例如Chrome，Safari和Opera）支持非标准:::-webkit-scrollbar伪元素，该元素可让我们修改浏览器滚动条的外观。

注：该:: - WebKit的滚动条没有被Firefox或IE和边缘的支持。

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

参考： 如何创建自定义滚动条

Tony宝儿2020/03/23 11:10:03

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

在CHROME上的支持

这是webkit滚动条的演示Webkit滚动条DEMO

如果您正在寻找更多示例，请查看此更多示例

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

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

从此处下载插件下载

如何使用以及更多选项请检查此

演示

Itachi宝儿2020/03/23 11:10:03

您可以通过一种方法将自定义滚动条应用于HTML文档中的自定义div元素。这是一个有帮助的例子。https://codepen.io/adeelibr/pen/dKqZNb但要点是。你可以做这样的事情。

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

CSS文件如下所示。

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#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;
}
神无2020/03/23 11:10:03

Firefox新版本（64）支持CSS滚动条模块级别1 

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

来源：https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Firefox滚动条

https://codepen.io/fatihhayri/pen/pqdrbd

斯丁泡芙2020/03/23 11:10:03
.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像。

猿EvaL2020/03/23 11:10:03

这是一个适用于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;
}

输出：

在此处输入图片说明

Gil伽罗小宇宙2020/03/23 11:10:03

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

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

Davaid番长2020/03/23 11:10:02

我尝试了很多插件，其中大多数不支持所有浏览器，我更喜欢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/

猪猪2020/03/23 11:10:02

CSS无法使用自定义滚动条，您需要一些JavaScript魔术。

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

乐米亚2020/03/23 11:10:02

试试这个

资料来源：https : //nicescroll.areaaperta.com/

简单实施 

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

这是一个jQuery插件滚动条，因此您的滚动条是可控制的，并且在各种OS上看起来都是相同的。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标
5 Answer
如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)
25 Answer
MAC终端删除代理有效命令
1 Answer
vue动态路由跳转同一地址不刷新页面
0 Answer
NUXT引入tailwindcss报错Error: Expected an opening square bracket.
1 Answer

LINKS

QuestionBlogMessageToolbox