[分享]css去除滚动条但能滚动

CSS是一种描述网页样式的语言，可以用于美化网页并增强网页的用户体验。其中，去除滚动条但又能滚动是CSS的一个常见需求。接下来，我们将介绍一些方法来实现这个功能。/ 方法一：使用overflow:hi...

CSS是一种描述网页样式的语言，可以用于美化网页并增强网页的用户体验。其中，去除滚动条但又能滚动是CSS的一个常见需求。接下来，我们将介绍一些方法来实现这个功能。

/* 方法一：使用overflow:hidden */

body{
  overflow:hidden;
}

/* 这种方法能够隐藏滚动条，但也会禁用所有滚动事件，因此如果需要使用滚动，需要使用JS来实现 */

/* 方法二：使用::-webkit-scrollbar伪元素 */

.example{
  max-width: 300px;
  height: 200px;
  overflow-y: scroll;
}

/* 在Chrome等浏览器中，可以使用伪元素::-webkit-scrollbar来修改滚动条的样式，设置其透明度即可去除滚动条 */

.example::-webkit-scrollbar{
  width: 0.5em;
}

.example::-webkit-scrollbar-thumb{
  background-color: rgba(0,0,0,0);
}

.example::-webkit-scrollbar-track{
  background-color: rgba(0,0,0,0);
}

/* 方法三：使用display:flex */

.example{
  max-width: 300px;
  height: 200px;
  display: flex;
}

.example > div{
  flex: 1;
  overflow-y: scroll;
  margin-right: -17px; /* 通过负margin来抵消滚动条的宽度 */
}

/* 在CSS3中，可以使用display:flex来实现没有滚动条但又能滚动的布局。通过设置子元素为flex：1并调整其margin-right来避免滚动条的出现。*/ 

以上是三种常用的CSS方法来去除滚动条但又能滚动的技巧，不同的场景可以选择不同的方法来实现。通过不断学习和实践，我们可以掌握更多的CSS技能来打造出更加精美的网页。