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 |