WPF 和 Avalonia 开发者的 html css 前端指南 ScrollViewer 篇

WPF 和 Avalonia 开发者的 html css 前端指南 ScrollViewer 篇

ScrollViewer 在 html css 的实现非常的简单，所以本篇非常简短。

如果你希望在页面内能够有一个可以滚动的小组件，在 WPF 或者是 Avalonia
中，你可能会使用 ScrollViewer 来实现，ScrollViewer 是一个特别的组件，但是 html
和 css 中这完全不是这样哦。

一、ScrollViewer 在 WPF 和 Avalonia 中的实现

在 WPF 和 Avalonia 中，你可以使用以下代码创建一个 ScrollViewer

图片效果来自于 Avalonia，我们在代码中有特别指定 HorizontalScrollBarVisibility
和 VerticalScrollBarVisibility。

  <ScrollViewer
      Width="200"
      Height="200"
      HorizontalScrollBarVisibility="Auto"
      VerticalScrollBarVisibility="Auto">

      <Border
          Width="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 中，我们有这样的界面：

<ScrollViewer
    Width="200"
    Height="200"
    HorizontalScrollBarVisibility="Auto"
    VerticalScrollBarVisibility="Hidden">

    <Border
        Width="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