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

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

相关推荐
前端架构师-老李17 小时前
HTML与CSS基础第二课—初识HTML
前端·css·html
java1234_小锋18 小时前
【技术专题】CSS3 网页技术 - CSS3 单位、颜色、字体与文本
前端·css·css3
CappuccinoRose18 小时前
拖拽交互体系
前端·javascript·css·html·交互·1024程序员节
神膘护体小月半1 天前
flex 布局的 order 属性
前端·css
java1234_小锋1 天前
【技术专题】CSS3 网页技术 - CSS3 优先级
前端·css·css3
绝世唐门三哥1 天前
CSS 换行三剑客:overflow-wrap、word-break 与 white-space 完全指南
前端·css
易朵朵1 天前
Z-index
css
CodeMi1 天前
2026 CSS 接管了这些 JS 的活:6 个 Baseline 特性的落地取舍
javascript·css
gCode Teacher 格码致知2 天前
前端教学8:提高 CSS 选择器的优先级,有哪些方法?
前端·css·html5
燕落南枝3 天前
CSS 表单选择器与伪元素选择器详解
前端·css