html 隐藏滚动条的简单实现

当我们在网页中需要展示一些内容时，并不希望页面上出现滚动条，此时就需要将滚动条隐藏。以下是HTML隐藏滚动条的简单实现攻略：

使用CSS的方式隐藏滚动条

使用CSS的方式隐藏滚动条可以通过将容器中 overflow 属性设置为 hidden 实现滚动条隐藏的效果。

.scroll-container {
  overflow: hidden;
}

在这里我们设置了一个名为 .scroll-container 的容器，将其中的 overflow 属性设置为 hidden，以此达到隐藏滚动条的效果。

使用伪元素的方式隐藏滚动条

另一种隐藏滚动条的方式是使用CSS中的 ::-webkit-scrollbar 伪元素来实现。不同于前面使用overflow属性隐藏滚动条的方式，这种方法可以精细控制滚动条的其他属性，如滑道（轨道）、滑块大小等等。

.scroller::-webkit-scrollbar {
  display: none;
}

如上，我们设置了一个名为 .scroller 的容器，将其中的 ::-webkit-scrollbar 属性设置为 display: none，以此达到隐藏滚动条的效果。

需要注意的是: 由于 ::-webkit-scrollbar 是一种CSS3属性，因此只适用于webkit内核的浏览器（Chrome、Safari等）。

示例

示例1：隐藏某个div中的滚动条

在以下的HTML代码中，我们设置了一个名为 .scroll-container 的容器，将其中的 overflow 属性设置为 hidden。

<div class="scroll-container" style="height: 300px; width: 300px;">
  <!-- 这个div中的滚动条会被隐藏 -->
  <p>这是被隐藏滚动条的div中的文字内容。</p>
</div>

示例2：字体滚动的轮播图中使用隐藏滚动条

在以下的HTML代码中，我们设置了一个字体滚动的轮播图，将其中的 ::-webkit-scrollbar 属性设置为 display: none。

<div class="scroller" style="height: 50px; width: 300px; overflow: auto;">
  <p>这里是一些不可见的文字内容。</p>
</div>

这里需要通过在文字滚动的 div 上将 overflow 属性设置为 auto。实际上可以通过overflow属性分别控制横向和纵向滚动条的隐藏，比如overflow-x就只控制横向滚动条的显示隐藏。

以上就是HTML隐藏滚动条的简单实现攻略。