comments 3

Scrollbar issue on touch devices using safari

On touch devices like iPad, iPhone etc scroll bar does not shows at all while you are using safari browser. By using


scroll bar is visible only while you are scrolling. Scroll bar issue on touch devices using safari is a common issue.

Following is the completely tested and verified fix. It is tested and verified in iPad mini, iPhone 4s and iPhone 5s.


<div class="scrollbar-for-ipad">Some
    <br />Text
    <br />For
    <br />creating
    <br />a
    <br />scrollbar
    <br />for
    <br />ipad/iphone,
    <br />android devices
    <br />and
    <br />other
    <br />touch
    <br />devices.


.scrollbar-for-ipad {
    overflow-y: auto;
    border: 3px solid green;
    height: 50px;
    width: 400px;
    line-height: 1em;
    font-family: arial;
    font-size: 12px;
.scrollbar-for-ipad::-webkit-scrollbar {
    -webkit-appearance: none;
.scrollbar-for-ipad::-webkit-scrollbar:vertical {
    width: 9px;
.scrollbar-for-ipad::-webkit-scrollbar:horizontal {
    height: 9px;
.scrollbar-for-ipad::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 3px solid white;
    background-color: rgba(0, 0, 0, .6);

Working JS Fiddle