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

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

相关推荐
CarIise20 小时前
事件传播、CSS动画、服务器字体与jQuery
服务器·css·jquery
XLYcmy21 小时前
HTML/CSS/JS 基础与 Vue 技术栈深度解析
java·前端·css·html·vue3·vue2·api
风月说与山鬼21 小时前
四、Tailwind CSS——间距与尺寸
前端·css·tailwind css
风月说与山鬼21 小时前
三、Tailwind CSS——排版与文字样式
前端·css·tailwind css
里欧跑得慢1 天前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web
晓得迷路了1 天前
栗子前端技术周刊第 144 期 - Rspack 2.2、pnpm 12、Solid 2.0 RC...
前端·javascript·css
CarIise2 天前
下拉菜单HTML/CSS/JS实现
前端·css
里欧跑得慢2 天前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
烂蜻蜓3 天前
Flask入门教程(十):静态文件——CSS、JS与图片的正确管理方式
javascript·css·flask
夏炳辉.3 天前
Flex布局中 flex: 1 的完整解析与实战指南
前端·css·css3