Question

我做了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

我希望它可以在移动设备上水平滚动并隐藏滚动条。所以我写了下面的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;
    }
}

如你所见，我尝试了各种我隐藏的方法。但它只有在我第一次加载页面时才有效。当我重新加载它时，滚动条再次出现。我需要帮助来解决它

Answer 1

解决此问题的crossbrowser方法是将底部填充设置为.navbar__inner元素并设置固定高度（应小于.navbar__inner的计算高度）和overflow：hidden to outer元素。这样滚动条将不可见，因为它将被置于比外部元素的底部更低的位置（并且将被覆盖）。

如何在手机游戏中隐藏滚动条？

1 个答案: