Question

使用CSS overflow属性设置为滚动时，如何在Windows OS中隐藏垂直滚动条。我可以滚动，但是我想隐藏垂直滚动条。

这是我的HTML标记：

 <div style="overflow: scroll; height: 1000px">
      <h1>Some content...</h1>
    </div>

在浏览时，我发现默认情况下在Mac OS上滚动条是隐藏的。 Windows上有这样的选项吗？

Answer 1

我不知道这是否是您所需要的。这将隐藏垂直滚动条。

overflow-y: hidden;

要隐藏水平，请使用：

overflow-x: hidden;

Answer 2

您可以使用overflow-y: auto;，如果内容不完整，则默认情况下将隐藏垂直滚动条，然后在元素溢出而内容不外流时显示它。

如果这是“默认情况下Mac OS滚动条是隐藏的”的意思？

<div style="overflow-y: auto; height: 1000px">
    <h1>Some content...</h1>
</div>

示例：https://codepen.io/StudioKonKon/pen/pqovYP

（注意：此示例对您的代码进行了一些更改，只是为了展示此工作的实时示例。）

var i = 0;

function add_more(node)
{
   node.parentElement.innerHTML += [
      "<h1>Some content ",
      "#", ++i,
      " ...</h1>"
   ].join("");
}

<div style="overflow-y: auto; height: 400px">
   <h1>Some content...</h1>
   <button onclick="add_more(this)">Add more content</button>
</div>

如何在Windows OS中隐藏垂直滚动条

2 个答案: