Question

我希望div的垂直滚动条不可见，但仍允许垂直滚动。

我尝试使用overflow-y: hidden，但是禁用了滚动。
我已经尝试过Webkit element::-webkit-scrollbar，但这也会影响水平滚动条。

我本以为Webkit的:vertical状态可以允许我执行此操作，但是它什么也没做。参见codepen：（https://codepen.io/numberjak/pen/MWgOMqd）

其他问题都在两个滚动条上，我只关心一个滚动条。

<div class="scroll"><div class="large-content"/></div>

.scroll {
  overflow: auto;
  max-width: 20rem;
  max-height: 20rem;
  background-color: black;
}

.scroll::-webkit-scrollbar:vertical {
  display: none;
}

.large-content {
  min-width: 100rem;
  min-height: 100rem;
  background-color: red;
}

Answer 1

尝试此CSS代码。

css

.large-content {
    background-color: red;
    width: 100%;
    height: 100%;
}

Answer 2

您可以执行以下操作来隐藏滚动条：

-webkit-（ Chrome ， Safari ， Opera 的较新版本）：

.scoll::-webkit-scrollbar { width: 0 !important; }

-moz-（ Firefox ）：

.scroll { overflow: -moz-scrollbars-none; }

-ms-（ Internet Explorer +10）：

.scroll { -ms-overflow-style: none; }

隐藏滚动条之前要考虑的重要点：

最好仅在所有内容可见时隐藏滚动条，否则用户可以跳过该内容。
避免在网页上进行水平滚动，并且不要隐藏水平滚动条，因为滚动条会使内容难以阅读
如果完全需要隐藏滚动，请：在折叠上方显示所有重要信息。用户可能经常决定是否要停留而不滚动而看到的内容。

Reference

隐藏垂直滚动条，同时保持可滚动状态

2 个答案: