CSS 隐藏容器元素的滚动条（且保持滚动事件的正常响应）

/* less */
.container {
  &::-webkit-scrollbar {
    display: none;
  }

  scrollbar-width: none;
}

 

1. 针对webkit内核的浏览器可使用：

::-webkit-scrollbar {
  display: none;  
}

来实现隐藏滚动条。

注：此特性是非标准的！

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

 

2. CSS Scrollbars（处于实验阶段的功能特性），主要有两个属性可用 ：

  scrollbar-width

  scrollbar-color

.container {
    scrollbar-width: none;
}

设置scrollbar-width为none来隐藏滚动条，不过目前貌似只有firefox的较高版本中支持。

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars