CSS for Scrollbar in iOS devices

Developer Support CMS Development
,
1

Hi!,

I am experiencing issues with the scrollbar lwhen using Ios devices specially in mobile,

the scrollbar won’t appear in this link https://www.besocialscene.com/new-sept-homepage?hs_preview=YhTtsyAc-13258353405,

There’s no issue with android and desktop as per the screenshot below, but when using iOS the scrollbar won’t appear

**

screenshots.jpg
screenshots.jpg1920×1080 296 KB

**

This are the codes that I have used for the styline of the scrollbar

::-webkit-scrollbar{

 -webkit-appearance: none;
 width: 7px;

}

::-webkit-scrollbar-thumb {

 border-radius: 4px;
 background-color: rgba(0,0,0,.5); 
 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

::-webkit-scrollbar {
 width: 5px;
}

::-webkit-scrollbar-track {
 background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
 background: #707070;
}

::-webkit-scrollbar-thumb:hover {
 background: #355cc9;
}
::-webkit-overflow-scrolling:touch; {
background:#707070;
width: 5px;
}
2

Hey @chrissa0000

Looks like you’ve got this to work?

If so what was the issue?

Or might I be missing something?

See below:

Chrome

IMG_3022.PNG.jpg
IMG_3022.PNG.jpg359×640 50.4 KB

Safari

3

Hi @Kevin-C ,

Thank you for the reply.

When I use the Developer tools it looks okay but on the actual phone it acts like this , there is an unwanted scroll to top issue,

scrollup2.gif

4

@chrissa0000 My appologies I misunderstood the problem.

After some digging oddly enough it looks the position of the UL is causing this. try setting it to “position: absolute;”. This will cause the child elements to be cut off. To aleviate this try modifying their widths to something like 95%.

Edit: “calc” as updated below might allow for more precise control over the display.

.back .description ul {
 position: absolute;
}

.back .description ul .draw-border {
 width: calc(100% - 5px);
}

Let me know if this ends up being a solution for you!

5

Yes it works!,

Thank you so much! @Kevin-C