HTML 隐藏滚动条和去除滚动条的方法

下面是详细讲解“HTML隐藏滚动条和去除滚动条的方法”的完整攻略。

隐藏滚动条

HTML默认情况下会显示滚动条，如果我们想要隐藏滚动条，可以使用CSS样式来实现。

方法一：使用overflow属性

可以使用CSS中的overflow属性将滚动条隐藏起来，下面是示例代码：

html {
  overflow: hidden;
}

上面实例中，我们将页面HTML元素（即根元素）的滚动条设置为隐藏状态，这将会隐藏整个页面的滚动条。

方法二：使用Webkit自带样式

我们可以使用Webkit自带样式来隐藏滚动条，下面是示例代码：

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;
}

上面实例中，我们使用CSS的伪元素::-webkit-scrollbar来改变滚动条样式，其中将宽和高都设置为了0，将显示设置为了none，这样就可以将滚动条隐藏起来。

去除滚动条

与上面的隐藏滚动条不同的是，去除滚动条将会让页面无法滚动，也就是说，当页面大小超过了浏览器窗口时，页面将不会被滚动。下面是去除滚动条的方法。

方法一：使用body的overflow属性

可以将页面的body元素的overflow属性设置为hidden来去除滚动条，下面是示例代码：

body {
  overflow:hidden;
}

上面实例中，我们将页面的body元素的overflow属性设置为hidden，这样页面将不会产生滚动条，也就是取消了页面的滚动特性。

方法二：使用javascript

使用javascript来去掉页面的滚动条也是一种方法，下面是示例代码：

document.documentElement.style.overflowY = 'hidden';

上面实例中，我们使用javascript来操作页面元素，将文档根元素的overflowY属性设置为hidden，这样整个页面将不会显示滚动条。

总结：

通过上面的几个方法，我们可以很方便地隐藏或者去除HTML页面的滚动条。需要注意的是，在隐藏滚动条和去除滚动条时，要根据实际情况选择合适的方法，不要使用不当的方式影响用户浏览体验。

阅读剩余 25%