CSS for Scrollbar in iOS devices

SOLVE
chrissa0000
Contributor

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.png

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

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Kevin-C
Solution
Recognized Expert

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

View solution in original post

4 Replies 4
Kevin-C
Recognized Expert

Hey @chrissa0000 

 

Looks like you've got this to work?

 

If so what was the issue?

Or might I be missing something?

 

See below:

 

ChromeChromeSafariSafari

 

chrissa0000
Contributor

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

0 Upvotes
Kevin-C
Solution
Recognized Expert

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

View solution in original post

chrissa0000
Contributor

Yes it works!,

 

Thank you so much! @Kevin-C 

0 Upvotes