水平滚动和溢出

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

#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>

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

注意事项：

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

这取决于是否应该隐藏水平或垂直； 如果是水平的，则设置宽度；否则设置高度；

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

Answer 2

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

Answer 3

只是一个运行良好的测试。

#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 */
}