css - 水平滚动和溢出

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. 最外层设置overflow为隐藏，宽高设置为你想要的值；
3. 对于第二层，将宽度或高度设置为比第一层长约20px。如果要隐藏垂直滚动条，请设置 overflow-x 为隐藏；否则将 overflow-y 设置为隐藏；

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

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