如何使用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.效果

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

相关推荐
Light602 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
速易达网络7 小时前
Vue3 原生移动应用开发来了
前端·javascript·css
用户458203153178 小时前
CSS 层叠层 (@layer) 详解:控制样式优先级新方式
前端·css
GISer_Jing11 小时前
透过浏览器原理学习前端三剑客:HTML、CSS与JavaScript
前端·javascript·css·html
昔人'13 小时前
css`text-wrap:pretty`
前端·css
@大迁世界13 小时前
这个 CSS 特性,可能终结样式冲突
前端·css
zwjapple14 小时前
css变量的使用。
css
川石课堂软件测试14 小时前
CSS中常用的几种定位。
开发语言·css·python·网络协议·http·html·pytest
詩句☾⋆᭄南笙14 小时前
CSS美化网页元素
前端·css·html
程序00714 小时前
HTML+JS+CSS实现汽车官网
javascript·css·html