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

我想有一个自定义的滚动条在铬

所以，我用这个sass：

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

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

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

}

它不起作用。有什么想法吗

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

---

查看此项

如果你是为一个班级做的，你可以用以下方法来做。侧栏是指定给要允许滚动的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; 
    }

---

现在是2020年，Firefox仍然不支持webkit滚动条。

---

此外，

overflow:auto

在Chrome和Safari中显示内容溢出时的滚动条，但在Firefox中，在我们开始滚动之前，不会显示可见的滚动条。去猜一下内容是否可以滚动。与溢出相同：滚动

。不太直观。
但在iOS Safari上，你似乎无法正确拖动滚动条（或单击箭头）。如果能解释一下为什么这样做也有效，那就太好了。你可以使用（香草轻量级脚本）更好地自定义滚动条