1# Implementing Content Scrolling 2 3A web page can be scrolled only when its content height or width exceeds the visible area. You can scroll a web page by using external devices, or by calling APIs on the ArkTS or JS side. 4 5## Using External Devices 6 7You can use the touchscreen, touchpad, and mouse to scroll the web page. 8+ Through the touchscreen, you can swipe up, down, left, or right with a single finger to scroll the web page. 9+ Through the touchpad, you can swipe up, down, left, or right on the laptop to scroll the web page. 10+ Through the mouse, you can scroll up and down the mouse wheel to control the scrolling of the Web page. 11 12## Calling ArkTS APIs 13+ [scrollTo](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#scrollto): scrolls the page to a specified absolute position within a specified period. 14 15 (1) To interrupt the scrolling process, you can execute an animation whose duration is 0. 16 ```ts 17 this.controller.scrollBy(0, 0, 1); // If you want to stop the animation generated by the current scroll, you can generate another 1 ms animation to interrupt the animation. 18 ``` 19 20 (2) Return to the top of the page. 21 ```ts 22 this.controller.scrollTo(0, 0); 23 ``` 24+ [scrollBy](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#scrollby): scrolls the page by a specified offset within a specified period. 25 26 (1) To interrupt the scrolling process, you can execute an animation whose duration is 0. 27 ```ts 28 this.controller.scrollBy(0, 0, 1); // If you want to stop the animation generated by the current scroll, you can generate another 1 ms animation to interrupt the animation. 29 ``` 30 31 (2) This API can be used to control the scrolling of **Web** components in nested scrolling. For details, see [Distributing Scrolling Offsets Through the Parent Scroll Component](web-nested-scrolling.md#distributing-scrolling-offsets-through-the-parent-scroll-component) 32 33+ [pageUp](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#pageup): scrolls up the Webview content by half of the viewport or jumps to the top of the page based on the input parameter **top**. 34+ [pageDown](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#pagedown): scrolls down the Webview content by half of the viewport or jumps to the bottom of the page based on the input parameter **bottom **. 35## Calling JS APIs 36+ **scrollBy**: scrolls by a certain distance relative to the current position (a positive number is downward/rightward, and a negative number is upward/leftward). 37 38 ```javascript 39 window.scrollBy (deltaX, deltaY);// deltaX indicates the scrolling distance of the element on the horizontal axis, and deltaY indicates the scrolling distance of the element on the vertical axis. 40 ``` 41 Progressive scrolling (such as the **Read more** button). 42 ```javascript 43 document.getElementById("read-more").addEventListener("click", ()=>{ 44 window.scrollBy(0, 300); 45 }) 46 ``` 47+ **scrollTo**: scrolls the page to the absolute coordinate position. 48 ```javascript 49 window.scrollTo (x, y);// X is the pixel of the element to be displayed in the upper left corner along the horizontal axis, and Y is the pixel of the element to be displayed in the upper left corner along the vertical axis. 50 ``` 51 (1) Return to the top of the page. 52 ```javascript 53 window.scrollTo(0, 0); 54 ``` 55 (2) Jump to a specific position on the page. 56 ```javascript 57 window.scrollTo (0, 500); // Scroll to a fixed pixel position (for example, 500 px). 58 ``` 59