滚动容器

在一个普通的固定尺寸的容器上添加 overflow: scroll 就可以创建一个滚动容器。 默认情况下,滚动容器支持横向滚动和纵向滚动,通过 overflow-x: scrolloverflow-y: scroll 可以单独设置横向和纵向的滚动。

下面的例子演示如何创建一个滚动容器:

  1. <div style={{ width: '100px', height: '100px', overflow: 'scroll' }}>
  2. <p>
  3. The overflow property specifies whether to clip content or to add scrollbars
  4. when an element's content is too big to fit in a specified area.
  5. </p>
  6. </div>

渲染效果:

滚动容器 - 图1
请选择以下任意一种方式预览:
1. 安装 Kraken CLI,然后复制以下命令到命令行中运行:
2. 在 Android 手机上先下载 Play Kraken App,然后打开 App 扫描下方二维码预览:
滚动容器 - 图2