2023年6月20日发(作者：)

CSS-界⾯滚动时不显⽰滚动条最近产品提出⼀个需求，在界⾯滚动时，元素右侧不显⽰滚动条。查了⽹上的答案，最后总结了⼀下⼏个情况。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补充）系统兼容性：Windows 下，浏览器需要加上 body { overflow-y: auto } 可以不显⽰滚动条，Mac 系统下没有这个问题。浏览器兼容性：webkit 内核浏览器使⽤ -webkit-scrollbar 效果明显，其他内核效果不明显。在⽕狐浏览器下，-webkit-scrollbar ⽆效，可以使⽤ scrollbar-width: none; 这样不会显⽰滚动条下⾯的图⽚是⽕狐浏览器，显⽰滚动条的情况加⼊ scrollbar-width: none; 后，滚动条不显⽰，界⾯可以滚动其他的浏览器可以尝试⽤上⾯⼏种⽅法解决

2023年6月20日发(作者：)

CSS-界⾯滚动时不显⽰滚动条最近产品提出⼀个需求，在界⾯滚动时，元素右侧不显⽰滚动条。查了⽹上的答案，最后总结了⼀下⼏个情况。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补充）系统兼容性：Windows 下，浏览器需要加上 body { overflow-y: auto } 可以不显⽰滚动条，Mac 系统下没有这个问题。浏览器兼容性：webkit 内核浏览器使⽤ -webkit-scrollbar 效果明显，其他内核效果不明显。在⽕狐浏览器下，-webkit-scrollbar ⽆效，可以使⽤ scrollbar-width: none; 这样不会显⽰滚动条下⾯的图⽚是⽕狐浏览器，显⽰滚动条的情况加⼊ scrollbar-width: none; 后，滚动条不显⽰，界⾯可以滚动其他的浏览器可以尝试⽤上⾯⼏种⽅法解决