iphone - iphone 中的 CSS3 自定义滚动问题

Question

我已经为 webkit 浏览器定制了滚动条。 以下是它的代码。

#defaultScroll p {
    width: 600px
}
#defaultScroll {
    height: 400px;
    width: 300px;
    overflow-x: scroll;
    position: relative;
}
#defaultScroll::-webkit-scrollbar-button {
    background: blue;
}
#defaultScroll::-webkit-scrollbar {
    width: 12px;
}
#defaultScroll::-webkit-scrollbar-track {
    background-color: #ffff00;
    border: 1px solid red;
}
#defaultScroll::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 5px;
}
#defaultScroll::-webkit-scrollbar-thumb:hover {
    background-color: green;
}

这是demo为了它。

它在所有浏览器中都工作正常，但是只有在 iphone 中 overflow-x 是不可见的。

Answer 1

刚刚为 #defaultScroll::-webkit-scrollbar 添加了 height: 12px

#defaultScroll::-webkit-scrollbar {
    width: 12px;
    height: 12px
   }

一切都很好。

我开始知道我们需要为水平滚动条定义高度。