Use onOverScroll of the Web component to determine whether the web page scrolls to the top or bottom. If the value of yOffset is less than 0, the page reaches the top. If the value of yOffset is greater than 0, the page reaches the bottom.
For details about how to transfer scrolling events, see Implementing Nested Scrolling. To transfer scrolling events to the page, embed the Web component in the scroll container and use the nestedScroll attribute to set the nested scrolling options. Sample code:
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct Index {
private scrollerForScroll: Scroller = new Scroller();
controller: webview.WebviewController = new webview.WebviewController; // Web component controller, used for loading pages and interaction control
@State scrollDirection: ScrollDirection = ScrollDirection.Vertical;
title = '2023 Ends, Welcome to 2024***********************************************';
review = 'Comment';
context ='Embrace 2024, ***********************************************************************************';
list = [0, 0, 0, 0];
build() {
Flex() {
Scroll(this.scrollerForScroll) {
Column({ space: 5 }) {
Text(this.title)
.fontSize(40)
.padding(40)
List() {
ForEach(this.list, () => {
ListItem() {
Text(this.context).fontSize(16)
}
})
}
Web({ src: $rawfile('index.html'), controller: this.controller })
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.height('100%')
.width('100%')
.layoutMode(WebLayoutMode.FIT_CONTENT)
Text(this.review)
.fontSize(30)
List() {
ForEach(this.list, () => {
ListItem() {
Text(this.context)
.fontSize(16)
}
})
}
}
.width('95%')
}
.scrollBar(BarState.Off)
.width('100%')
.height('120%')
.scrollable(this.scrollDirection)
}
.width('100%')
.height('100%')
}
} Create the index.html file in src/main/resources/rawfile.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ol>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
<li>Celebrate the Festival, ********************************************************</li>
<li>********************************************************</li>
</ol>
</body>
</html>