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

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

相关推荐
im_AMBER13 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父17 分钟前
前端速通—CSS篇
前端·css
尘世中一位迷途小书童32 分钟前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
Giant1001 小时前
小白也能懂的响应式布局:从 0 到 1 学会适配所有设备
css
银安2 小时前
CSS排版布局篇(8):Grid 二维布局
前端·css
华仔啊4 小时前
Vue3 登录页还能这么丝滑?这个 hover 效果太惊艳了
前端·css·vue.js
牧杉-惊蛰12 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
CoderYanger13 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
蓝胖子的多啦A梦14 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
ะัี潪ิื17 小时前
精灵图(雪碧图)的生成和使用
java·css