vue 设置和隐藏滚动条

在Vue中，可以通过CSS样式来控制滚动条的显示与隐藏。以下是实现这一功能的方法和示例代码：

显示滚动条:

.show-scrollbar {
  overflow: auto; /* 或者使用 'scroll' */
}

隐藏滚动条但仍可滚动:

.hide-scrollbar {
  overflow: auto; /* 隐藏滚动条 */
  /* 针对WebKit浏览器 */
  &::-webkit-scrollbar {
    display: none;
  }
  /* 针对FireFox浏览器 */
  scrollbar-width: none; /* Firefox */
}

在Vue模板中使用:

<template>
  <div id="app">
    <div class="show-scrollbar">这里的内容会显示滚动条</div>
    <div class="hide-scrollbar">这里的内容会隐藏滚动条但可以滚动</div>
  </div>
</template>
 
<style>
.hide-scrollbar {
  overflow: auto;
  /* 隐藏滚动条 */
  /* 针对WebKit浏览器 */
  &::-webkit-scrollbar {
    display: none;
  }
  /* 针对FireFox浏览器 */
  scrollbar-width: none; /* Firefox */
}
</style>

在这个例子中，.show-scrollbar 类使得元素的滚动条总是可见，而 .hide-scrollbar 类则通过CSS规则隐藏了滚动条，同时允许元素滚动。需要注意的是，隐藏滚动条可能会影响可访问性，因为它使得一些用户无法直观地知道内容是可以滚动的。