vb6.0 listview隐藏水平方向滚动条_为Vuetify的UI组件添加滚动条

前言

有必要说明，这其实是一个很简单的功能，用原生实现也非常简单：

#preview-zone {
  overflow-y: auto;
  overflow-x: hidden;
  height: 90%;
  width: 100%;
}
           

overflow是CSS的原生属性，x和y分别代表水平和垂直方向的滚动条：

CSS overflow ÊôÐÔ​www.w3school.com.cn

但是，如果你使用原生属性，你会发现这个属性是与Vuetify的elevation属性冲突，无论是通过什么方式加在组件上。

所以，必须要用Vuetify打败Vuetify，而且这个方案也很简单。

只是这个事放在Vuetify里有点让人疑惑？（很让人疑惑）

解决方案在最后！

问题描述

因为在使用Vuetify这种组件库后，经常会思考我是不是可以用Vuetify的组件替代原生的HTML元素，例如v-img，v-btn等等。滚动条也是如此。

对于我来说，我考虑到Vuetify如此全面，一定有独立的组件，所以我开始检索中文文档。

滚动指令 — Vuetify.js​vuetifyjs.com

在API中，可以发现：

冥冥之中感到一丝疑惑，为什么一个滚动条还要绑定对象呢，算了，继续看下去。

再往下看完两个实例，好像和我的需求还是没什么关系，重新看看简介：

？？？？？

没关系，既然v-scroll都能提供回调，就说明一定能够提供滚动。

让我们来

仔细地

看看文档中的两个实例：

实例1：

<template>
  <div>
    <v-row justify="center" align="center">
      <v-subheader>Offset Top</v-subheader>
      {{ offsetTop }}
    </v-row>
    <v-container
      id="scroll-target"
      style="max-height: 400px"
      class="overflow-y-auto"
    >
...
           

实例2：

<template>
  <v-card
    v-scroll.self="onScroll"
    class="overflow-y-auto"
    max-height="400"
  >
 ...
           

真正的scroll永远不会躲藏在虚伪的v-scroll下！

解决方案

其实很简单，我们以一个v-card组件为例：

<v-card
          elevation="12"
          class="overflow-y-auto overflow-x-hidden"
          max-height="80vh"
        >
...
           

通过class添加

overflow-y-auto / overflow-x-auto

，就可以显示垂直或者水平滚动条。

而由于内部组件的具体宽度/长度，你可能还需要做出额外调整或者是使用overflow-x-hidden来隐藏自动出现的水平方向滚动条。

最后

我发现很多框架的文档，内容会写一半，或者是点到即止，实例也都是很简单又或者是和常见的需求没什么关系。有这种感受，第一个原因可能是我太菜了，这么简单的东西都没有领悟；第二个原因，为了给别人继续解释/出书/写文章留出空间？

如果我负责这一章文档的编写，我一定会先说明如何通过Vuetify让一个组件实现在固定的长度组件内滚动，之后再说明如何让一个组件滚动并且可以实现监听/callback等功能，由浅及深。

可能这样会让文档变得冗长，更像是一本开发手册。只能说，这样的文档对我这样的新人不太友好吧。