vue实现横向滚动条显示，竖向滚动条隐藏但能滚动

Prunusss

已于 2022-05-23 14:03:17 修改

阅读量8.2k

点赞数 6

文章标签： vue.js javascript 前端

于 2022-05-12 23:16:26 首次发布

本文链接：https://blog.csdn.net/weixin_43904427/article/details/124742124

版权

本文介绍了如何通过CSS样式调整，使网页内容在隐藏横向或纵向滚动条的同时保持滚动功能。方法一是设置父元素的`overflow`属性，方法二是使用`::-webkit-scrollbar`，最终解决方案是设置scrollbar宽度为0来控制滚动方向。

摘要由CSDN通过智能技术生成

一开始的需求是横向竖向都隐藏但能滚动，有两种方法：

在滚动区域外面加一层div，设置overflow：hidden；或者设置scrollbar的display属性。

// 方法一，设置父级元素overflow：hidden
<div class="outer">
  <div class="inner"></div>
</div>

...

<style>
  .outer {
    overflow: hidden;
  }
  .inner {
    overflow: auto;
  }
</style>

// 方法二，设置scrollbar的display属性
<style>
  .inner::-webkit-scrollbar {
    display: none;
  }
</style>

但为了提示用户页面内可以横向滚动，要把横向滚动条展示出来。

这时上面两个方法都会失效：

display:none会把横向和竖向滚动条都隐藏；

而overflow-x:auto;overflow-y:hidden虽然能满足横向显示、竖向不显示，但会使得竖向无法滚动。

最终解决方法是设置scrollbar的width为0。因此，类似地，如果要显示竖向、隐藏横向，设置height：0就可以。

<div>
  <div class="inner"></div>
</div>

...

<style>
  .inner {
    overflow: auto;
  }
  .inner::-webkit-scrollbar {
    width: 0 !important;
  }
</style>