如何在移动浏览器中隐藏滚动条？

Question

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

Answer 1

The crossbrowser way to solve this problem is to set bottom padding to .navbar__inner element and set fixed height (should be less than computed 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.