# 平板横屏显示时，页面滑动区域过小

#### 问题现象

应用页面上下内容固定，中间区域可滑动，在平板横屏显示时，上下固定内容部分高度变高，中间滑动区域被压缩成一小行，无法流畅滑动。

#### 背景知识

Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

#### 问题定位

1.  检查代码中可滑动区域高度是否设置为固定值，示例如下：
    
    ```
    Scroll(this.scroller) {
      Column() {
        ForEach(this.arr, (item: number) => {
          Text("ListItem" + item)
            .width("100%")
            .height(150)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .backgroundColor(Color.White)
        }, (item: string) => item)
      }
      .width('100%')
    }
    .width("100%")
    .height(200)
    ```
    
2.  检查代码中页面上下固定区域高度是否设置为百分比。

#### 分析结论

应用可滑动页面只适配了手机大小，当应用在平板横屏打开时，窗口会变大，上下部分高度变高，可滑动区域高度不变，导致页面滑动区域被压缩，滑动体验不流畅。

#### 修改建议

修改滑动区域高度值，也设置为百分比占比，在平板上时可以同比放大。

```
@Entry
@Component
struct ScrollPage3432 {
  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  scroller: Scroller = new Scroller();

  build() {
    Flex() {
      Column() {
        Text("Scroll Area")
          .width("100%")
          .height('20%')
          .backgroundColor('#D1D1D6')
          .fontSize(16)
          .textAlign(TextAlign.Center);

        Scroll(this.scroller) {
          Column() {
            ForEach(this.arr, (item: number) => {
              Text("ListItem" + item)
                .width("100%")
                .height(150)
                .borderRadius(15)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .backgroundColor(Color.White);
            }, (item: string) => item);
          }
          .width('100%');
        }
        .width("100%")
        // 高度设置为百分比
        .height('60%');

        Text("Scroll Area")
          .width("100%")
          .height('20%')
          .backgroundColor('#D1D1D6')
          .fontSize(16)
          .textAlign(TextAlign.Center);
      };
    }
    .width("100%").height("100%");
  }
}
```