css如何去掉滚动条样式-猿码集

1. CSS如何去掉滚动条样式

CSS中可以通过一些属性，来控制网页中滚动条的样式以及是否显示滚动条。使用这些属性可以让网页更加美观，也可以让网页的用户体验更加良好。

1.1 隐藏滚动条

在CSS中，我们可以通过给HTML元素设置overflow:hidden;属性，来隐藏该元素的滚动条。例如：


body {
  overflow: hidden;
}

上述代码会隐藏整个网页的滚动条。

1.2 自定义滚动条样式

在CSS3中，我们可以通过::-webkit-scrollbar来控制滚动条的样式，其中-webkit-是指针对webkit浏览器内核的。如果想要兼容其他浏览器内核，需要再使用其他前缀。

下面是一些自定义滚动条样式的示例。

1.2.1 隐藏滚动条


/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

通过设置::-webkit-scrollbar的display属性为none，即可隐藏滚动条。

1.2.2 修改滚动条宽度和背景色


/* 修改滚动条宽度和背景色 */
::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background-color: #aaa;
}

上述代码会将滚动条的宽度设置为12px，背景色设置为#f5f5f5，滚动条的拖拽块的背景色设置为#aaa。

对于::-webkit-scrollbar-thumb，它是用来控制滚动条拖拽块的样式的。同样，我们可以通过它来修改滚动条拖拽块的背景色、边框样式等。

1.2.3 修改滚动条形状和圆角


/* 修改滚动条形状和圆角 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: #f5f5f5;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 6px;
}

上述代码会将滚动条的宽度和高度都设置为12px，形状变成了正方形，并设置了边框圆角为6px。

2. CSS如何隐藏滚动条同时保留其功能

如果我们只是想隐藏滚动条，但是又需要保留滚动条的滚动功能，那该怎么做呢？实际上，我们可以利用一些技巧来实现这个目的。

2.1 使用伪元素

我们可以通过在HTML元素上使用伪元素，将滚动条覆盖掉，从而实现滚动条的隐藏。


/* 使用伪元素隐藏滚动条 */
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body::-webkit-scrollbar-thumb {
  background-color: transparent;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background-image: linear-gradient(to top, #000, transparent);
}

上述代码中，我们将滚动条设置为不可见，然后使用伪元素::before来覆盖滚动条。具体来说，我们将::before设置为全屏（注意需要设置position: fixed;），并设置z-index: 9999;来确保它在最上层。然后我们再使用background-image来设置::before的背景，这里我们使用了一个从黑到透明的渐变来模拟滚动条的背景。

2.2 使用JavaScript

除了使用CSS之外，我们还可以通过JavaScript来隐藏滚动条。具体来说，我们可以在网页加载完成后，通过document.documentElement.style.overflow='hidden';将html元素的滚动条隐藏掉。然后我们再使用JavaScript来监控鼠标滚轮事件，从而实现网页的滚动。


// 隐藏滚动条
(function() {
  document.documentElement.style.overflow = 'hidden';
})();
// 监听滚轮事件
window.addEventListener('mousewheel', function(e) {
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  document.documentElement.scrollTop -= (delta*50);
  document.body.scrollTop -= (delta*50);
}, {
  passive: false // 需要阻止默认行为
});

在上述代码中，我们使用了一个自执行函数来隐藏滚动条。然后在页面滚动时，我们监听了mousewheel事件（注意需要阻止默认行为），从而实现了滑动网页的效果。

3. 总结

本文介绍了如何使用CSS来控制滚动条的样式和是否显示滚动条，以及如何利用一些技巧隐藏滚动条同时保留其功能。除此之外，我们还介绍了通过JavaScript来实现网页滚动的效果。希望本文能对大家有所帮助。

css如何去掉滚动条样式