# CSS for Scrollbar in iOS devices

**URL:** <https://community.hubspot.com/t/css-for-scrollbar-in-ios-devices/16477>\
**Category:** CMS Development\
**Tags:** design-manager, css\
**Created:** [September 30, 2019, 5:54am UTC](https://community.hubspot.com/t/css-for-scrollbar-in-ios-devices/16477 "2019-09-30T05:54:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrissa0000](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chrissa0000/32/89259_2.png) [@chrissa0000](https://community.hubspot.com/u/chrissa0000)\
**Post date:** [September 30, 2019, 5:54am UTC](https://community.hubspot.com/t/css-for-scrollbar-in-ios-devices/16477/1 "2019-09-30T05:54:06Z")

</div>

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,](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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/4/f4783698f63e1c0af2c83e4ef15097f8f1e8f9eb.jpeg)  
\*\*

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

```auto
::-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;
}

```

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [October 1, 2019, 5:57pm UTC](https://community.hubspot.com/t/css-for-scrollbar-in-ios-devices/16477/2 "2019-10-01T17:57:54Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/c/bc77b57f6fc3821d12591f887f3288825fc427ff.jpeg)  
Safari

---

<div class="post-metadata">

**Author:** ![chrissa0000](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chrissa0000/32/89259_2.png) [@chrissa0000](https://community.hubspot.com/u/chrissa0000)\
**Post date:** [October 4, 2019, 2:31pm UTC](https://community.hubspot.com/t/css-for-scrollbar-in-ios-devices/16477/3 "2019-10-04T14:31:45Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/1/4143268ec661dc5fce9ef2bff117f5f8c92dc04e.gif)

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [October 4, 2019, 3:06pm UTC](https://community.hubspot.com/t/css-for-scrollbar-in-ios-devices/16477/4 "2019-10-04T15:06:28Z")

</div>

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

```auto
.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!

---

<div class="post-metadata">

**Author:** ![chrissa0000](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chrissa0000/32/89259_2.png) [@chrissa0000](https://community.hubspot.com/u/chrissa0000)\
**Post date:** [October 7, 2019, 6:56am UTC](https://community.hubspot.com/t/css-for-scrollbar-in-ios-devices/16477/5 "2019-10-07T06:56:23Z")

</div>

Yes it works!,

Thank you so much! @Kevin-C