如何合理隐藏滚动条

.no-scrollbar {
  /* 横向溢出隐藏 */
  overflow-x: hidden;
  -ms-scroll-chaining: chained;
  /*隐藏滚动条,当IE下溢出,仍然可以滚动*/
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  /*火狐下隐藏滚动条*/
  scrollbar-width: none;
  &::-webkit-scrollbar,
  ::-webkit-scrollbar {
    width: 0;
    /* 保证内部元素需要横向滚动的内容可以看到滚动条 */
    height: 10px;
  }
  &::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-thumb {
  	/* 滚动条里面可以拖动的按钮 */
    background-color: #ddd;
  }
}

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

你可能感兴趣的:(CSS,css,css3,html)