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

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

相关推荐
林焱_RPAAI1 小时前
影刀RPA操作数据库进阶:事务处理与批量写入优化
css
牧艺4 小时前
cos-design PhotoAlbum:用 CSS 3D 做一个「能翻页」的实体相册
前端·css·交互设计
muddjsv1 天前
CSS 盒模型进阶约束:极值尺寸、固有尺寸与外边距折叠
前端·css
布兰妮甜1 天前
暗黑模式一键切换完整方案(CSS 变量 + 本地存储)
javascript·css·web开发·用户体验·前端工程化
muddjsv1 天前
CSS 盒模型完全指南:content-box 与 border-box 尺寸计算原理
前端·css
米码收割机1 天前
【前端】html+css 甘肃天水旅游(源码+文档)【独一无二】
前端·css·html
米码收割机1 天前
【前端】html_css 沐光公益阅读馆(源码+文档)【独一无二】
前端·css·html
布兰妮甜1 天前
原子化 CSS 深度解析:Tailwind 原理、自定义配置、大型项目利弊
css·性能优化·tailwind·前端工程化·设计系统
用户059540174462 天前
LangChain 记忆测试踩坑实录:这两个坑让我排查了 4 小时
前端·css
徐佳明2 天前
从"能聊天"到"能干活":MCP Server 如何让 AI 智能体真正落地
css