css影藏又边滚动条

CSS可以帮助我们控制网页的样式，其中一个常用的效果就是隐藏页面的滚动条。那么该如何实现这样的效果呢？我们可以使用CSS的overflow属性来设置。

body{
  overflow: hidden; /*隐藏滚动条*/
}

如此简单的设置就可以隐藏页面的滚动条了！但是这样的话对于长内容的页面，用户可能无法浏览全部内容，这就需要通过其他的方式来实现。

一个常见的方法就是在网页添加自定义滚动条。我们可以使用CSS和JavaScript来实现这个效果。首先，在我们的CSS文件中定义自定义滚动条的样式：

/*自定义滚动条样式*/
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #555;
}

在JavaScript中，我们需要使用监听滚动事件的方法，将滚动条的滚动位置通过计算，转化为页面的scrollTop属性进行设置：

//监听页面的滚动事件
window.addEventListener("scroll",function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  //将滚动位置设置为页面顶部的scrollTop属性
  document.documentElement.scrollTop = scrollTop;
});

通过以上的代码，我们就可以实现隐藏原生滚动条，使用自定义滚动条的效果了！