1# Implementing Content Scrolling
2
3**Webview.WebviewController** in ArkWeb provides the **scrollTo** and **scrollBy** APIs.
4
5When the size of the content displayed on the web page is much greater than the component size, you can use **scrollTo** and **scrollBy** to scroll the content that is not displayed on the web page. In addition, you can generate a scrolling animation. Currently, the animation effect cannot be interrupted by gestures. You can forcibly interrupt the animation by executing an animation whose duration is about 0.
6
7> **NOTE**
8>
9> - The content can be scrolled when the length or width of the web page is greater than that of the display area.
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)
81