[分享]css去掉纵向滚动条

在网页开发中，纵向滚动条的出现给整个页面造成了不良的影响，因此许多网页制作人员都希望能够去掉这类滚动条。为了帮助大家更好地解决这个问题，我们今天来介绍一下如何通过CSS去掉纵向滚动条。body{ ov...

在网页开发中，纵向滚动条的出现给整个页面造成了不良的影响，因此许多网页制作人员都希望能够去掉这类滚动条。为了帮助大家更好地解决这个问题，我们今天来介绍一下如何通过CSS去掉纵向滚动条。

body{
  overflow-y: hidden;
} 

可以通过对body元素进行CSS设置来实现去掉纵向滚动条。上述代码中，“overflow-y”属性值为“hidden”，就是将纵向溢出部分隐藏掉。具体来说就是将垂直滚动条线隐藏。

使用上述代码虽然可以去掉纵向滚动条，但如果内容高度超出视口高度，那么部分内容就会被隐藏掉，这显然不是我们所期望的结果。那么该如何解决呢？请看下面的代码：

body{
  margin-right: calc(100vw - 100%);
  overflow-y: scroll;
} 

如果内容高度超出视口高度的问题，可以通过使用“calc()”函数来解决。该函数的计算方式是：计算100viewport width减去100%的值，然后设置给“margin-right”属性。它的作用就是撑开整个页面，使得纵向滚动条不再遮挡其中的内容。同时，“overflow-y”属性值改为“scroll”，可以滚动显示纵向溢出的内容。

总结来说，如果你想要去掉网页中的纵向滚动条，可以使用“overflow-y: hidden;”来实现；如果你同时希望内容超出视口高度时，页面不会被遮挡住，那么可以使用“margin-right: calc(100vw - 100%);”来撑开页面，再使用“overflow-y: scroll;”来滚动显示纵向溢出的内容。