水平滚动和溢出

Question

我想要水平滚动但看不到滚动条。所以我尝试了多种方法，例如下面提供的解决方案。

Hide scroll bar, but still being able to scroll

我现在拥有的：

nav {
    display: inline;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    min-width: 75em;
    overflow-y: hidden;
    overflow-x: hidden;

    .overflow_wrap {
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none;
        width: 100%;
        height: 100%;
        height: auto;
        text-align: center;
        float: left;
        background-color: $white;
        border-bottom: 1px solid $third_fontcolor;

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

    }

}

我可以水平滚动，但我在其他浏览器中仍然看到滚动条 Chrome。有没有办法来解决这个问题？我看到了多种垂直滚动的解决方案，但没有看到滚动条，但没有看到水平滚动。我可能遗漏了什么。

Answer 1

有一种方法很简单 - 使用 overflow-x: auto 而不是 overflow-x: scroll 让浏览器使用它们的默认行为。

Answer 2

只是一个运行正常的测试。

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}

Answer 3

#parent{
    height: 100px;
    width: 100px;
    overflow: hidden;
}

#child{
    height: 100px;  /* set the width 20px longer, so that vertical scroll disabled */
    width: 120px;
    overflow-y: auto;
    overflow-x: hidden;
}

#child2{
   width: 100px;  /* real width for scrolling */
 font-size:30px;
 background:#ff0;
 word-wrap:break-word;
}

<div id="parent">
 <div id="child">
  <div id="child2">kjhdsvcbsk,jgfnbv lihkfxdkjfdxhlgbfdzkjvdrjbgkjdxblkjhgvbdzkjbvkjdzbvkjldzgvkjhgbdzlkbvlkjdzkjvdzhflkjbhfdzkjbghlkjfdznbbdxblsergdrsnttdrhytdjnhtdumhykjdnijertsnbvls</div>
 </div>
</div>

代码如上，您可以删除不需要的东西。

注意事项：

设置3层元素；
最外层设置overflow为隐藏，宽高设置为自己想要的值；
对于第二层，将宽度或高度设置为比第一层长约20px。如果要隐藏垂直滚动条，请设置 overflow-x 为隐藏；否则将 overflow-y 设置为隐藏；

那要看是水平隐藏还是垂直隐藏；如果是水平的，则设置宽度；否则设置高度；

对于最后一个子元素，将宽度和高度设置为您想要的值。

水平滚动和溢出

Horizontal scrolling & overflow

css

scroll

overflow

scrollbar

horizontal-scrolling