I made navbar usign jade:

nav.navbar.navbar_white
    div.navbar__inner
        ul.nav-list
            li.nav-list__item_dark
                a(href="#") item 1
            li.nav-list__item_dark
                a(href="#") item 2
            li.nav-list__item_dark
                a(href="#") item 3
            li.nav-list__item_dark
                a(href="#") item 4

And I want it to be horizontally scrollable on mobile and hide the scroll bar. So I wrote the following scss:

.nav-list {
    padding: 15px 0;
    margin: 0;
    width: 100%;
    list-style: none;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch!important; 
    -ms-overflow-style: -ms-autohiding-scrollbar!important;

    &::-webkit-scrollbar { 
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        display: none !important;
    }
}

As you see, I tried every way I know to hide it. But it works only when I load the page for the first time. When I reload it the scrollbar appears again. I need help to fix it

I made navbar usign jade:

nav.navbar.navbar_white
    div.navbar__inner
        ul.nav-list
            li.nav-list__item_dark
                a(href="#") item 1
            li.nav-list__item_dark
                a(href="#") item 2
            li.nav-list__item_dark
                a(href="#") item 3
            li.nav-list__item_dark
                a(href="#") item 4

And I want it to be horizontally scrollable on mobile and hide the scroll bar. So I wrote the following scss:

.nav-list {
    padding: 15px 0;
    margin: 0;
    width: 100%;
    list-style: none;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch!important; 
    -ms-overflow-style: -ms-autohiding-scrollbar!important;

    &::-webkit-scrollbar { 
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        display: none !important;
    }
}

As you see, I tried every way I know to hide it. But it works only when I load the page for the first time. When I reload it the scrollbar appears again. I need help to fix it

• javascript
• html
• ios
• css

Share Improve this question Follow asked Mar 14, 2017 at 18:34 Benjamin TrepachkoBenjamin Trepachko 11122 silver badges1212 bronze badges 3

• Did you ever figure this out? No matter what I do I can't get the default mobile safari scroll bar to be invisible on my scrolling horizontal menu. – flyingL123 Commented Jul 12, 2017 at 19:41
• Anything new on this? Having this issue as well. – Crashtor Commented Jul 20, 2017 at 11:08
• @Crashtor Yes, I posted the answer – Benjamin Trepachko Commented Aug 9, 2017 at 12:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The crossbrowser way to solve this problem is to set bottom padding to .navbar__inner element and set fixed height (should be less than puted height of .navbar__inner) and overflow:hidden to outer element. So that the scrollbar will not be visible because it will be placed lower (and will be overlowed) than the bottom of outer element.