CSS3 custom scroll issue in iphone

Question

I have customize scroll for webkit browsers. Following is the code for it.

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

And Here is the demo for it.

It's working fine in all browsers, however only in iphone overflow-x is not visible.

Answer 1

Just added height: 12px for #defaultScroll::-webkit-scrollbar

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

and all was working great.

I came to know that we need to define height for horizontal scrollbar.