Web组件的onOverScroll事件可以判断滑动是否到达顶部或底部。当yOffset小于0时，表示页面到达顶端；当yOffset大于0时，表示页面到达底端。
具体可参考代码示例：传递滑动事件可参考Web组件嵌套滚动，将Web组件嵌入可滚动容器中，使用nestedScroll属性设置嵌套滚动选项，实现滑动事件传递。具体代码示例如下：
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落下帷幕，一起迎接2024年***********************************************';
review = '评论';
context = '一起迎接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%')
}
} 在“src\main\resources\rawfile”文件夹下创建index.html：
<!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>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
<li>欢度佳节，********************************************************</li>
<li>********************************************************</li>
</ol>
</body>
</html>