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

-webkit-overflow-scrolling

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.

HTML

<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.
</div>

CSS

.scrollbar-for-ipad {
    overflow-y: auto;
    border: 3px solid green;
    height: 50px;
    width: 400px;
    line-height: 1em;
    font-family: arial;
    font-size: 12px;
    padding:5px;
}
.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

  • Marc_Alx

    Just one thing, thank you !

    • Aamir Shahzad

      Most welcome Marc. I am glad this helped you.

  • Shiva R

    it is working fine for me, thank you so much ! amir shanhzad