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

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

相关推荐
寒水馨1 天前
Windows下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-windows-x64.exe)
前端·css·前端开发·tailwind css·utility-first·css 框架·独立 cli
思码梁田1 天前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css
muddjsv1 天前
CSS 高级选择器精讲:伪类、伪元素、逻辑伪类与选择器解耦规范
前端·css
用户446846004801 天前
C 语言分支与循环语句总结
css
寒水馨1 天前
macOS下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-macos-arm64)
前端·css·macos·tailwind css·utility-first·css 框架·实用优先
朕的剑还未配妥2 天前
CSS 实现渐变毛玻璃:从 backdrop-filter 到多层 mask
前端·css
nicole bai3 天前
手写tab选中
前端·javascript·css
用户059540174463 天前
用了3年Redis,才发现我一直没搞懂缓存一致性测试
前端·css
muddjsv3 天前
CSS选择器体系精讲:按身份、结构、状态精准匹配元素(零基础吃透)
前端·css
用户059540174464 天前
LLM对话记忆测试踩坑实录:手工回归30分钟,自动化后2分钟发现3个隐藏Bug
前端·css