elementUI 隐藏aside的横向滚动条和竖向滚动条

大家好呀,今天给大家介绍如何设置elementUI中滚动条的隐藏问题,因为是在今天做侧边栏里面的导航时出现了底侧导航栏和右边的导航栏,一看是在是有点丑了,于是乎就从别的博主那里找到了两个方法,再此总结一下。

最初的样式:丑的一匹

12658e77f816401ab8d5a44af90ca794.png 

 

 隐藏底部导航栏:只需要把会出现侧边栏的内容区域放在<el-scrollbar></el-scrollbar>标签中即可,在为这个标签加一个类名就叫做page-scroll,然后在加入下面的样式。

/* 隐藏横向滚动条 */

 .page-scroll {

    height: 100%;

  }

 

  .page-scroll .el-scrollbar__wrap {

    overflow-x: hidden;

  } 

我就是把el-menub标签放进了<el-scrollbar></el-scrollbar>标签里面

ef0a1d1bb93043548d088907d7db695f.png

 效果图:

 dda813c4f49242e18358b17fedb4afdb.png

 虽然在最初没有滚动条了,但是在进行页面缩放的时候还是会有右侧的滚动条。

那么如何在也页面缩放时也取消侧边栏呢,那么就可以直接使用这个样式,就更加方便啦~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

.el-aside::-webkit-scrollbar {

     display: none;

}

 直接在style中加入上面那个样式就一劳永逸啦

2fa6f03c5c054b7a9892da330c7996b4.png 

 

 

 

  • 14
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

H-rosy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值