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

Question

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

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

Answer 1

亲测 -- 移动端IOS html网页隐藏滚动条

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

html,
body {
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    /* 使得ios滑动流畅 */
    -webkit-overflow-scrolling: touch;
}

有的时候 -webkit-overflow-scrolling: touch; 会导致滚动条不出现, 不知道你们有没有这样的情况

---

PS : 设置 height: 100%; overflow: hidden; overflow-y: scroll; 是重点

Answer 2

自定义滚动条只有webkit内核的浏览器才支持，微信页面既然也是webkit了，所以按理来说也是支持的，那么您可以这样来定义颜色（假定我要红色的滚动条）：

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

效果如下：