html页面盒子有滚动条,css如何在界面滚动时不出现滚动条？

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布局，鼠标移动会造成宽度变化，所以可以使用下面的改进版，不同情况父元素设置不同的宽度div {

overflow: hidden;

width: calc(100% - 8px);

8px 是滚动条的宽度(在谷歌上显示良好)

}

div:hover {

overflow: auto;

width: 100%;

}

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

方法一：设置滚动条的样式(在webpack内核的浏览器比较适合)这样可以同时设置滚动条的宽度和颜色。这种办法很好。div::-webkit-scrollbar {

width: 0;

}

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

float: right;

width: 32%

}

div {

float: left;

width: 70%;

}

4、系统兼容性和浏览器兼容性

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

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

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

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

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

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

更多web前端工程师相关知识，请查阅 HTML中文网 ！！