Question

我想在Chrome中使用自定义滚动条。

所以，我正在使用这个sass：

    body {
      text-align:center;
      background:url(dark-gradient-tumblr-wallpaper-1.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover; 
    }

    h1 {color:white;
      font-family:arial;
      font-weight:bold;
      line-height:150%;
    }

    table {
              margin:0 auto;
              width:300px; /* or whatever width you want */
      font-style:italic;
            }

    p {
    text-indent:25px;
    text-align:center;
    color:grey
  }

我的问题是我只想在特定div中使用此滚动条样式。但如果我这样做：

::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.1);
  border-radius: 3px;

  &:hover {
    background: rgba(255,255,255,.2);
  }
}

无效。有什么想法吗？

Answer 1

#boardslist {

  &::-webkit-scrollbar {
   width: 0.5em;
   height: 0.5em;
  }

  &::-webkit-scrollbar-thumb {
   background-color: rgba(255,255,255,.1);
   border-radius: 3px;

   &:hover {
    background: rgba(255,255,255,.2);
   }
  }
}

查看http://codepen.io/tholman/pen/tldwm

Answer 2

如果您正在上课，可以按照以下方式进行。侧边栏是给您要允许滚动的div的类。

.side_bar{
    padding-right: 20px; 
    margin-left: -12px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: scroll;
    /* width */

}
.side_bar::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
.side_bar::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px grey; 
        border-radius: 10px;
    }

    /* Handle */
.side_bar::-webkit-scrollbar-thumb {
        background: rgb(7, 7, 7); 
        border-radius: 10px;
    }

    /* Handle on hover */
.side_bar::-webkit-scrollbar-thumb:hover {
        background: #009eb3; 
    }

Answer 3

现在是2020年，Firefox仍不支持::-webkit-scrollbar。当内容在Chrome和Safari中溢出时，overflow:auto还会显示滚动条，但是在Firefox中，直到我们开始滚动时，才会显示可见的滚动条。去猜测内容是否可滚动。与overflow:scroll相同。不是很直观。

仅在一个div中自定义滚动条

3 个答案: