Hide scrollbars on div.. No code I've tried seems to help!

Design help Custom code
1

So I just want to hide the scrollbars on a specific window (div). I have no problem styling or customizing the main pages scrollbars but when a smaller div like in the image below is set to scroll, those don’t seem to take on the css given to it. I don’t know why this is happening.

Would appreciate any help! I’m just curious about this because on PC it looks horrible. Mac is never an issue, just PC and certain browsers. If I can’t get this resolved it is not the end of the world but I figured I would reach out to you guys and seek a solid answer to this.

Scrollbar%20Problem
Scrollbar%20Problem1464×841 166 KB

I have tried using these here:

<style>
.preview-window::-webkit-scrollbar { 
display: none!important; 
}
</style>

<script>
var parent = document.getElementById('template-column-right');
var child = document.getElementById('preview-wrapper');
child.style.paddingRight = child.offsetWidth - child.clientWidth + "10px";
</script>

I just need this fixed on the Templates CMS pages (Custom Code Section)
Here is my share link: https://preview.webflow.com/preview/graphic-owls?preview=b831091993983c2670a6f43d29c5554d

Thanks in advance!

2

@Noah-R

:thinking: This code worked for me in a project to hide some horizontal scrollbars.

<style> 
.CLASS::-webkit-scrollbar
{
display:none;
}
</style>

Notice that you need a space after display:none and before !important. Did you ever get this working?

2 Likes
3

Thanks Matthew! I’m going to see if this one works!

4

Aces! worked first time round. Lovely