topic Re: CSS for Scrollbar in iOS devices in CMS Development

CSS for Scrollbar in iOS devices

chrissa0000 — Mon, 30 Sep 2019 05:54:44 GMT

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

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

Re: CSS for Scrollbar in iOS devices

Kevin-C — Tue, 01 Oct 2019 17:57:54 GMT

Hey @chrissa0000

Looks like you've got this to work?

If so what was the issue?

Or might I be missing something?

See below:

ChromeSafari

Re: CSS for Scrollbar in iOS devices

chrissa0000 — Fri, 04 Oct 2019 14:31:45 GMT

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,

Re: CSS for Scrollbar in iOS devices

Kevin-C — Fri, 04 Oct 2019 19:27:12 GMT

@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!

Re: CSS for Scrollbar in iOS devices

chrissa0000 — Mon, 07 Oct 2019 06:56:23 GMT

Yes it works!,

Thank you so much! @Kevin-C