html隐藏滚动条保留滚动效果,及修改滚动条样式

1.隐藏滚动条保留滚动效果

.container{
    height:300px;
    overflow-x: hidden;
	overflow-y: auto; // 设置垂直方向上的滚动条
    scrollbar-width: none; // 兼容火狐
    -ms-overflow-style: none; // 兼容IE10+
    /*  解决 ios 上滑动不流畅 */
    -webkit-overflow-scrolling: touch;
}
// 隐藏滚动条，兼容 chrome 和 safari 浏览器

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

2.修改滚动条样式

&::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 3px;
  }

  /*定义滚动条轨道 内阴影+圆角*/

  &::-webkit-scrollbar-track {
    //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.05);
  }

  /*定义滑块 内阴影+圆角*/

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background: rgba(0, 0, 0, 0.15);
  }