Hide Scroll bar

Design help General
1

Need help, I try to make like a gallery with couples images.
I need to hide the scroll bar
I tried overflow: hidden doesn’t work
I even tried this code but still doesn’t work

body { -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none; // Firefox } body::-webkit-scrollbar { display: none; // Safari and Chrome }

any help will be appreciated

Here is my site Read-Only: https://preview.webflow.com/preview/test1-08ced8?utm_medium=preview_link&utm_source=designer&utm_content=test1-08ced8&preview=39282e20a67e4876ee639d2d577d783a&mode=preview

2 Likes
3

This should work:

<style>
/* width */
::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #FFF; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


body { -webkit-font-smoothing: antialiased; }


body { overflow: -moz-scrollbars-none; -ms-overflow-style: none;  }
:root{
  scrollbar-width: none !important;
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

</style>
4

Thank you Matzinger,

It doesn’t work also. but I used your code with transparent trick

<style>
/* width */
::-webkit-scrollbar {
  width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
  background: transparent; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: transparent; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: transparent; 
```
}


body { -webkit-font-smoothing: antialiased; }


body { overflow: -moz-scrollbars-none; -ms-overflow-style: none;  }
:root{
  scrollbar-width: none !important;
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

</style>

and it works fine now. thank you so much

1 Like
5

@remonsam there’s also a less custom code solution that companies like Airbnb and Bustle use on their sites.

To hide a horizontal scroll bar, go the the element with overflow:scroll and add 20px of padding to the bottom, and then add -20px of margin on the bottom. This extends the height 20px and then hides it with the margin which hides the scroll bar.

This can also be applied to the vertical scroll bar by adding 20px padding to the right and -20px margin to the right.

Hope this helps.

10 Likes
6

Thank you so much @doseofdanno your solution very elegant and works fine
what makes your solution perfect is work fine with the other browsers like Firefox.

Again, thank you so much for sharing

2 Likes
7

This is the best practice to hide the vertical scroll bar

<style>
/* removing scroll bar(vertical) */
::-webkit-scrollbar {
  display:none;
}
</style>

Add this styling in custom code
Welcome

2 Likes
8

This was the only code that actually removed my scroll bar. Thank you!