Question

我正在创建一个网络应用，我需要设计我的滚动条

.scroll {
        height: 550px;
        overflow: scroll;
    }

这是我的css

我在我的主要div中添加了我的CSS

<div ng-app="myApp" ng-controller="customersCtrl" style="background-color:#17354B;" class="myDiv container scroll">

我将以下css更改为此

.scroll {
            height: 550px;
            overflow: scroll;
            color:red;
        }

但是我没有更改滚动条，而是改变了以下div中的文本（我知道文本正在改变的原因）

我想自定义以下滚动条，（更改宽度，颜色设计）我该怎么做？

Answer 1

据我所知，滚动条的W3C标准CSS不可用。您可以使用-webkit-scrollbar来实现它。

div::-webkit-scrollbar {
    width: 2em;
}
 
div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(200,0,0,1);
}
 
div::-webkit-scrollbar-thumb {
  background-color: grey;
  outline: 1px solid slategrey;
}



div{
  overflow : scroll;
  height : 100px;
  background-color : #eeeeee;
  }

<div>
    <p>Content inside div element</p>
    <p>Content inside div element</p>
    <p>Content inside div element</p>
    <p>Content inside div element</p>
    <p>Content inside div element</p>
    <p>Content inside div element</p>
    <p>Content inside div element</p>
    <p>Content inside div element</p>
    <p>Content inside div element</p>
    <p>Content inside div element</p>
    
    </p>
  </div>

参考： https://css-tricks.com/custom-scrollbars-in-webkit/

设计滚动条css

1 个答案: