1# Web页面显示内容滚动
2
3ArkWeb中的Webview.WebviewController提供scrollTo和scrollBy接口。
4
5当Web显示的内容大小远远大于组件大小时，用户可以通过scrollTo和scrollBy对Web页面中显示的内容进行滚动来显示没有显示的部分，且可以生成动画滚动效果。目前动画效果不支持手势打断，可以通过再次执行一个时间约为0的动画进行强制打断。
6
7> **说明：**
8>
9> - 支持滚动的条件： Web页面的长度或宽度大于显示区域的长度或宽度。
10
11```ts
12// xxx.ets
13import { webview } from '@kit.ArkWeb';
14import { BusinessError } from '@kit.BasicServicesKit';
15
16@Entry
17@Component
18struct WebComponent {
19  controller: webview.WebviewController = new webview.WebviewController();
20
21  build() {
22    Column() {
23      Button('scrollTo')
24        .onClick(() => {
25          try {
26            this.controller.scrollTo(50, 50, 500);
27          } catch (error) {
28            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
29          }
30        })
31        .margin(10)
32      Button('scrollBy')
33        .onClick(() => {
34          try {
35            this.controller.scrollBy(50, 50, 500);
36          } catch (error) {
37            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
38          }
39        })
40        .margin(10)
41      Button('scrollStop')
42        .onClick(() => {
43          try {
44            this.controller.scrollBy(0, 0, 1);
45          } catch (error) {
46            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
47          }
48        })
49        .margin(10)
50      Web({ src: $rawfile('index.html'), controller: this.controller })
51    }
52  }
53}
54```
55
56```html
57<!-- main/resources/rawfile/index.html -->
58<html>
59<head>
60    <title>Demo</title>
61    <style>
62        body {
63            width:2000px;
64            height:2000px;
65            padding-right:170px;
66            padding-left:170px;
67            border:25px solid blueviolet
68            back
69        }
70        .scroll-text {
71        font-size: 75px;
72        }
73    </style>
74</head>
75<body>
76<div class="scroll-text">Scroll Text</div>
77</body>
78</html>
79```
80![web-content-scrolling](figures/web-content-scrolling.gif)