CSS-界面滚动时不显示滚动条

最近产品提出一个需求，在界面滚动时，元素右侧不显示滚动条。查了网上的答案，最后总结了一下几个状况。

一、设置常规的滚动条：使用 overflow:auto。父元素须要设置一个高度，设置相对定位，这样子元素的高度大于父元素高度才能显示滚动条。若是父元素的高度彻底由子元素撑开，界面上不会出现滚动条。设置overflow：auto 失效的主要问题：多是这个div没有设置 100% 而后父元素清除浮动 (float：none; position: relative;)

.father {
    position: relative;
    height: 100px;
    border: 1px splid red;
}
.son {
    overflow: auto;
    height: 1000px;
}

二、设置鼠标通过显示的滚动条：预设值盒子是 hidden。当鼠标通过这样盒子时，设置盒子的overflow 变成 auto。这样鼠标不通过时不会显示滚动条。缺点：若是盒子内部有文字，盒子的宽度变化可能形成文字的从新排版，视觉上有点很差看。

div {
  overflow: hidden;
}
div:hover {
  overflow: auto;
}

若是内容宽度是百分比或者flex布局，鼠标移动会形成宽度变化，因此可使用下面的改进版，不一样状况父元素设置不一样的宽度（2019年7月补充）。

div {
  overflow: hidden;
  width: calc(100% - 8px);
  8px 是滚动条的宽度（在谷歌上显示良好）
}
div:hover {
  overflow: auto;
  width: 100%;
}

 

三、设置界面能够滚动可是不显示滚动条：

方法一：设置滚动条的样式（在 webkit 内核的浏览器比较适合）这样能够同时设置滚动条的宽度和颜色。这种办法很好。

div::-webkit-scrollbar {
  width: 0;
}

方法二：右侧元素设置宽度或者定位，将左侧元素的滚动条遮挡。这样的方法不入流，在移动端兼容很差实现。

div {
  float: right;
  width: 32%
}
div {
  float: left;
  width: 70%;
}

四、系统兼容性和浏览器兼容性（2019-12-0二、2020-05-01补充）

系统兼容性：Windows 下，浏览器须要加上 body { overflow-y: auto } 能够不显示滚动条，Mac 系统下没有这个问题。

浏览器兼容性：webkit 内核浏览器使用 -webkit-scrollbar 效果明显，其余内核效果不明显。

在火狐浏览器下，-webkit-scrollbar 无效，可使用 scrollbar-width: none; 这样不会显示滚动条

下面的图片是火狐浏览器，显示滚动条的状况

加入 scrollbar-width: none; 后，滚动条不显示，界面能够滚动

其余的浏览器能够尝试用上面几种方法解决