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

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

相关推荐
keyipatience2 小时前
JavaScript学习(1)书写位置,变量、数据类型、运算符
开发语言·前端·javascript·css·学习
酷炫码神9 小时前
Day 2|CSS 盒模型:把昨天的骨架,变成能看的页面
前端·css
oicola11 小时前
Ant Design v5 vs Tailwind CSS:组件库与样式框架的终极对决
前端·css
软件技术NINI1 天前
美妆商城html+Css+js 4页
javascript·css·html
2603_965896621 天前
Grid 网格布局|CSS 二维页面排版体系
前端·css
多喝水身体棒1 天前
# CSS Grid布局入门,二维布局再也不用float了
css
软件技术NINI1 天前
化妆品html+css+js 7页
javascript·css·html
kaixin_learn_qt_ing2 天前
hexdump -C /path/to/binary | less 看十六进制内容
前端·css·less
damoluomu2 天前
SSG 的后台怎么补:Node.js 生态里的三条路(番外二)
javascript·css·typescript·node.js·html
溪语流沙2 天前
【每天一个CSS | Day23】边框上有一道光在跑的流光呼吸卡片
前端·css