How to hide a scroll bar? (Tried the element overflow:scroll 20px padding -20px margin)

Design help General
1

Dear dev/design affionados,

I’m trying to hide a horizontal scroll in a MOBILE view of a carousel. I already tried the “set the element overflow: scroll 20px padding -20px margin” but it didn’t work.

Scroll down a tad on the front page of https://www.capnella.fi/ till you see:

Screenshot 2020-09-10 at 21.56.51
Screenshot 2020-09-10 at 21.56.511856×800 316 KB

Thanks for checking and really appreciate any help :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/capnella?utm_medium=preview_link&utm_source=dashboard&utm_content=capnella&preview=76c10626b49d67c2661481d192668e70&mode=preview

Site: https://www.capnella.fi/

2

You’ll need to include some custom CSS to get the scrollbars hidden but retain functionality. There’s a write up that you can checkout here, but it should look like what I’ve included below:

<style>
  .div-block-186::-webkit-scrollbar {
    display: none;
  }
  .div-block-186 {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
</style>

Keep in mind this may lead to users not knowing that this section can be scrolled to the right, so it may be useful to either style the scrollbar so it works more nicely with your design or to look into another solution like a slider element (with multiple “slides” visible) or stacking the cards in this section on mobile.

3

@mikeyevin thanks a lot mate! This solved it. And thanks for the additional tips :wink:

1 Like