CSS-界面滚动时不显示滚动条；隐藏滚动条

代码如下：

#content{
    overflow-y: scroll;
    -ms-overflow-style:none;
    scrollbar-width: none;
}
::-webkit-scrollbar {
    display: none;
}

    scrollbar-width: none; // firefox下滚动条不显示
   -ms-overflow-style:none; // IE下滚动条不显示
    // chrome滚动条不显示
   div::-webkit-scrollbar {
      display: none;
   }

---

摘自：

https://blog.csdn.net/weixin_41697143/article/details/88622936

https://www.html.cn/qa/css3/13147.html

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

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

2、设置鼠标经过显示的滚动条：预设值盒子是 hidden。当鼠标经过这样盒子时，设置盒子的overflow 变成 auto。这样鼠标不经过时不会显示滚动条。缺点：如果盒子内部有文字，盒子的宽度变化可能造成文字的重新排版，视觉上有点不好看。

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

3、设置界面可以滚动但是不显示滚动条：

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

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

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

• ::-webkit-scrollbar — 整个滚动条.

• ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).

• ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.

• ::-webkit-scrollbar-track — 滚动条轨道.

• ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.

• ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.

• ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

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

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