WPF 和 Avalonia 开发者的 html css 前端指南 ScrollViewer 篇
ScrollViewer 在 html css 的实现非常的简单，所以本篇非常简短。
如果你希望在页面内能够有一个可以滚动的小组件，在 WPF 或者是 Avalonia
中，你可能会使用 ScrollViewer 来实现，ScrollViewer 是一个特别的组件，但是 html
和 css 中这完全不是这样哦。
一、ScrollViewer 在 WPF 和 Avalonia 中的实现
在 WPF 和 Avalonia 中，你可以使用以下代码创建一个 ScrollViewer
图片效果来自于 Avalonia，我们在代码中有特别指定 HorizontalScrollBarVisibility
和 VerticalScrollBarVisibility。
<ScrollViewerWidth="200"Height="200"HorizontalScrollBarVisibility="Auto"VerticalScrollBarVisibility="Auto"><BorderWidth="400"Height="400"Background="Aqua" /></ScrollViewer>
二、ScrollViewer 在 html css 中的实现方式
在 html 中并没有 ScrollViewer 的概念，取而代之的是 css 的 overflow
属性，通过为容器赋予overflow: auto就可以实现类似 ScrollViewer 的效果了。
<template><div class="container"><div class="container-content"></div></div>
</template><style lang="css" scoped>.container {overflow: auto;width: 200px;height: 200px;}.container-content {width: 400px;height: 400px;background: aqua;}
</style>
三、水平和竖直滚动条的可见性控制
一般情况下，内部嵌入的 ScrollViewer
中，仅水平方向的滚动条可见的情况是比较主流的。如何控制水平和竖直滚动条的可见性是我们这一块的话题。
比如在 Avalonia 中，我们有这样的界面：
<ScrollViewerWidth="200"Height="200"HorizontalScrollBarVisibility="Auto"VerticalScrollBarVisibility="Hidden"><BorderWidth="400"Height="400"Background="Aqua" />
</ScrollViewer>
在 html css 中，可以写成下面的形式：
<template><div class="container"><div class="container-content"></div></div>
</template><style lang="css" scoped>.container {overflow-x: auto;overflow-y: hidden;width: 200px;height: 200px;}.container-content {width: 400px;height: 400px;background: aqua;}
</style>
Avalonia 中的枚举值
ScrollBarVisibility.Visible、ScrollBarVisibility.Auto、ScrollBarVisibility.Hidden、和ScrollBarVisibility.Disabled对应
overflow-x 与 overflow-y 的 visible、auto、hidden和 disabled。
（笔者未验证过 WPF 的对应关系）
四、总结
WPF 和 Avalonia 对应 html css 的关系
| WPF 和 Avalonia | html + css | 备注 |
|---|---|---|
| ScrollViewer 控件 | 使用 overflow、overflow-x、overflow-y 进行控制 |
具体滚动条方向得取决于overflow-x和 overflow-y |
HorizontalScrollBarVisibility |
overflow-x |
一般推荐使用 auto 和 hidden |
VerticalScrollBarVisibility |
overflow-y |
一般推荐使用 auto 和 hidden |
关于 HorizontalScrollBarVisibility 和 VerticalScrollBarVisibility 对应 overflow
的关系
参考用法： HorizontalScrollBarVisibility = "Visible"
等价于overflow-x:visible;
| Avalonia | css |
|---|---|
| ScrollBarVisibility.Visible | visible |
| ScrollBarVisibility.Auto | auto |
| ScrollBarVisibility.Hidden | hidden |
| ScrollBarVisibility.Disabled | disabled |
)
)
)
)
)
)
