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层元素;
表示最外层，设置要隐藏的溢出，并将宽度和高度设置为您想要的值;
对于第二层，将宽度或高度设置为比第一层长约20px。如果要隐藏垂直滚动条，请将overflow-x设置为隐藏;否则设置overflow-y隐藏;

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

表示最终的子元素，将宽度和高度设置为所需的值。

水平滚动＆amp;溢出

3 个答案: