如何使用css隐藏掉滚动条

1.解决方案

在滚动元素上再包裹一个父元素,然后,该元素添加如下代码:

(注:PC端浏览器滚动条为8px)使元素偏移原来位置8px,目的就是将滚动条区域移动到父元素边框外面,然后,父元素上添加overflow:hidden即可

css 复制代码
margin-right: -8px;
margin-bottom: -8px;
height: 100%;
overflow: scroll;

2.示例代码

css 复制代码
.menus-part--wrapper{
  height: calc(100vh - 80px) !important;
  overflow: hidden;
  .menus-part-content{
    margin-right: -8px;
    margin-bottom: -8px;
    height: 100%;
    overflow: scroll;
  }
}

3.效果

选中元素后,绿色区域就是被移动到父元素外的滚动条。

相关推荐
DoWhatUWant5 小时前
WebUI页面结构
css·html5
爱上好庆祝9 小时前
移动端适配
前端·css·学习·html·css3
邂逅星河浪漫20 小时前
【银行内网开发-管理端】Vue管理端+Auth后台开发+Nginx配置+Linux部署(详细解析)
linux·javascript·css·vue.js·nginx·html·前后端联调
慕斯fuafua20 小时前
CSS——浮动
前端·css
xcjbqd01 天前
CSS中隐藏元素的多重技巧与应用场景
前端·css
慕斯fuafua1 天前
CSS——定位
前端·css
AnalogElectronic1 天前
html+js+css实现七龙珠神龙召唤特效
javascript·css·html
qq_381338501 天前
现代 CSS 黑科技:Container Queries、:has() 与嵌套语法实战
前端·css·科技
程序员buddha2 天前
SCSS从0到1精通教程
前端·css·scss
小李子呢02112 天前
前端八股CSS---CSS选择器和优先级
前端·css