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

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

相关推荐
十盒半价2 小时前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
Savior`L6 小时前
CSS知识复习5
前端·css
Liudef0610 小时前
儿童趣味记忆配对游戏
css·游戏·css3
吉吉安18 小时前
两张图片对比clip功能
javascript·css·css3
快起来别睡了21 小时前
CSS 层叠上下文:从“谁在前,谁在后”说起
css
南方kenny1 天前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
爱编程的喵1 天前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css
傻球1 天前
彻底搞懂「像素/PPI/DPI/分辨率/DPR/缩放」之间的关系
前端·css
ai小鬼头1 天前
AIStarter:一键部署AI工具,轻松提升效率的秘密武器!
css·人工智能·github