Scroller滚动容器

2025-04-18 09:14:38首发，29分钟前更新

scroller滚动容器用来放置过宽或宽高的内容，以滚动的形式展示内容。

前言

目前移动端应用比较流行，但是移动设备的屏幕宽度有限，能显示的内容也有限，当页面使用大型表格时会导致内容溢出，继而导致整个页面发生滚动。

我们需要整个页面不能滚动，而只是超出内容的节点滚动即可，但是节点本身的宽高一般是适应自身内容，此时需要通过限制父容器的尺寸，让父容器产生滚动行为。

滚动容器就是为了这个目的。

对节点使用_scroller样式类即表示一个滚动容器，默认宽和高自适应滚动。

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

可对滚动容器直接设置宽高，或者使用容器自身的变量设置宽高:

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

滚动容器如果设置了宽高，那么在所有终端上都会采取相同的宽高，这样子在移动设备中应该是不合适的，此时可能需要专门针对移动设备设置限制的宽高尺寸。

通过内置的css变量控制不同终端下不同容器的宽高尺寸：

对于从上至下的流式布局而言，通常设置容器的高度即可。

演示示例

默认平板竖手机竖

如果为了防止内容外溢，需要对非滚动的方向使用overflow-*:hidden。

另外一个方法则是明确滚动方向，使用axis=x或者axis:y。

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```