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

全栈程序员-站长 • 2026年3月19日下午4:26 • 未分类 • 阅读 3

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

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; }

如果内容宽度是百分比或者flex布局，鼠标移动会造成宽度变化，所以可以使用下面的改进版，不同情况父元素设置不同的宽度（2019年7月补充）。

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

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

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

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

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

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

4、系统兼容性和浏览器兼容性（2019-12-02、2020-05-01、2022-07-12补充）

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

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

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

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

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

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

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

其他的浏览器可以尝试用上面几种方法解决

5、Windows 上需要实现 macOS 上的滚动条样式

最近产品又改了需求（一砖头拍死），需要在 Windows 和 Mac 上显示相同的滚动条样式，也就是需要改变 Windows 下面滚动条的样式，那么可以这样处理，可以在 windows 下改变滚动条。

下面是示范代码和实际效果

.your-class::-webkit-scrollbar{ width: 8px; height: 8px; } .your-class::-webkit-scrollbar-button { display: none; } .your-class::-webkit-scrollbar-thumb { background-color: rgb(206, 206, 212); border-radius: 10px; }

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

默认会在浏览器控制台改变 css 进行测试，如果遇到滚动条是伪类，无法直接更改怎么办？可以直接使用 JS 改变CSS，代码如下，这样在控制台调试滚动条就更方便了。

var style = document.createElement("style"); document.head.appendChild(style); sheet = style.sheet; // 这一行改变背景色，用于测试 JS 代码是否执行，类名是否正确 // sheet.addRule('.your-class','background-color: pink'); // 下面三行，用来在控制台修改滚动条样式 sheet.addRule('.your-class::-webkit-scrollbar','width: 8px;height: 8px;'); sheet.addRule('.your-class::-webkit-scrollbar-button','display: none;'); sheet.addRule('.your-class::-webkit-scrollbar-thumb','background-color: rgb(206, 206, 212);border-radius: 10px;');

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/206115.html原文链接：https://javaforall.net