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

一开始的需求是横向竖向都隐藏但能滚动，有两种方法：在滚动区域外面加一层div，设置overflow：hidden；或者设置scrollbar的display属性。// 方法一，设置父级元素overflow：hidden<div class="outer"><div class="inner"></div></div>...<style>.

Prunusss

8257人浏览 · 2022-05-12 23:16:26

Prunusss · 2022-05-12 23:16:26 发布

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

在滚动区域外面加一层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>