本文介紹了 WPF 和 Avalonia 中的 ScrollViewer 和 html css 如何對應起來，為 html css 新手有所參考。

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