html5 - 关于在ios微信页面滚动条样式

Question

 ul{
    position: relative;
    width: 100%;
    height: 76px;
    border-top: 1px solid #d7d7d7;
    overflow-x: auto;
}

这段代码会自动出现x轴的滚动条，但是在ios微信页面里面这个滚动条是透明的，我想把这个滚动条的做成一个带颜色的，请问css需要怎么写才行呢？

Answer 1

Custom scroll bars are only supported by webkit-based browsers. Since the WeChat page is also webkit, it is logically supported. Then you can define the color like this (assuming I want a red scroll bar):

p::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: red;
  border: 0px solid #fff;
}

The effect is as follows: