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.jsvuetifyjs.com

在API中，可以发现：

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

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

？？？？？

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

让我们来仔细地看看文档中的两个实例：

实例1：

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

实例2：

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

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

解决方案

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

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

通过class添加overflow-y-auto / overflow-x-auto，就可以显示垂直或者水平滚动条。

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

最后

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

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

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