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`