输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发Web框架Web开发（ArkWeb）如何判断Web滑动到了顶部/底部，并且把滑动事件传递给页面

如何判断Web滑动到了顶部/底部，并且把滑动事件传递给页面

更新时间: 2026-06-26 09:07

Web组件的onOverScroll事件可以判断滑动是否到达顶部或底部。当yOffset小于0时，表示页面到达顶端；当yOffset大于0时，表示页面到达底端。

具体可参考代码示例：传递滑动事件可参考Web组件嵌套滚动，将Web组件嵌入可滚动容器中，使用nestedScroll属性设置嵌套滚动选项，实现滑动事件传递。具体代码示例如下：

收起
自动换行
深色代码主题
复制
  1. import { webview } from '@kit.ArkWeb';
  2. 

  3. @Entry
  4. @Component
  5. struct Index {
  6.   private scrollerForScroll: Scroller = new Scroller();
  7.   controller: webview.WebviewController = new webview.WebviewController; // Web component controller, used for loading pages and interaction control
  8.   @State scrollDirection: ScrollDirection = ScrollDirection.Vertical;
  9.   title = '2023落下帷幕，一起迎接2024年***********************************************';
  10.   review = '评论';
  11.   context = '一起迎接2024年，***********************************************************************************';
  12.   list = [0, 0, 0, 0];
  13. 

  14.   build() {
  15.     Flex() {
  16.       Scroll(this.scrollerForScroll) {
  17.         Column({ space: 5 }) {
  18.           Text(this.title)
  19.             .fontSize(40)
  20.             .padding(40)
  21.           List() {
  22.             ForEach(this.list, () => {
  23.               ListItem() {
  24.                 Text(this.context).fontSize(16)
  25.               }
  26.             })
  27.           }
  28. 

  29.           Web({ src: $rawfile('index.html'), controller: this.controller })
  30.             .nestedScroll({
  31.               scrollForward: NestedScrollMode.SELF_FIRST,
  32.               scrollBackward: NestedScrollMode.SELF_FIRST
  33.             })
  34.             .height('100%')
  35.             .width('100%')
  36.             .layoutMode(WebLayoutMode.FIT_CONTENT)
  37.           Text(this.review)
  38.             .fontSize(30)
  39.           List() {
  40.             ForEach(this.list, () => {
  41.               ListItem() {
  42.                 Text(this.context)
  43.                   .fontSize(16)
  44.               }
  45.             })
  46.           }
  47.         }
  48.         .width('95%')
  49.       }
  50.       .scrollBar(BarState.Off)
  51.       .width('100%')
  52.       .height('120%')
  53.       .scrollable(this.scrollDirection)
  54.     }
  55.     .width('100%')
  56.     .height('100%')
  57. 

  58.   }
  59. }

在“src\main\resources\rawfile”文件夹下创建index.html：

收起
自动换行
深色代码主题
复制
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11. <ol>
  12.     <li>欢度佳节，********************************************************</li>
  13.     <li>********************************************************</li>
  14.     <li>欢度佳节，********************************************************</li>
  15.     <li>********************************************************</li>
  16.     <li>欢度佳节，********************************************************</li>
  17.     <li>********************************************************</li>
  18.     <li>欢度佳节，********************************************************</li>
  19.     <li>********************************************************</li>
  20.     <li>欢度佳节，********************************************************</li>
  21.     <li>********************************************************</li>
  22.     <li>欢度佳节，********************************************************</li>
  23.     <li>********************************************************</li>
  24.     <li>欢度佳节，********************************************************</li>
  25.     <li>********************************************************</li>
  26.     <li>欢度佳节，********************************************************</li>
  27.     <li>********************************************************</li>
  28.     <li>欢度佳节，********************************************************</li>
  29.     <li>********************************************************</li>
  30.     <li>欢度佳节，********************************************************</li>
  31.     <li>********************************************************</li>
  32.     <li>欢度佳节，********************************************************</li>
  33.     <li>********************************************************</li>
  34.     <li>欢度佳节，********************************************************</li>
  35.     <li>********************************************************</li>
  36.     <li>欢度佳节，********************************************************</li>
  37.     <li>********************************************************</li>
  38.     <li>欢度佳节，********************************************************</li>
  39.     <li>********************************************************</li>
  40.     <li>欢度佳节，********************************************************</li>
  41.     <li>********************************************************</li>
  42.     <li>欢度佳节，********************************************************</li>
  43.     <li>********************************************************</li>
  44.     <li>欢度佳节，********************************************************</li>
  45.     <li>********************************************************</li>
  46.     <li>欢度佳节，********************************************************</li>
  47.     <li>********************************************************</li>
  48.     <li>欢度佳节，********************************************************</li>
  49.     <li>********************************************************</li>
  50.     <li>欢度佳节，********************************************************</li>
  51.     <li>********************************************************</li>
  52.     <li>欢度佳节，********************************************************</li>
  53.     <li>********************************************************</li>
  54.     <li>欢度佳节，********************************************************</li>
  55.     <li>********************************************************</li>
  56.     <li>欢度佳节，********************************************************</li>
  57.     <li>********************************************************</li>
  58.     <li>欢度佳节，********************************************************</li>
  59.     <li>********************************************************</li>
  60. </ol>
  61. </body>
  62. </html>
Web组件如何访问本地的资源文件，并添加查询参数
在Web组件的H5页面中，如何使用a标签实现打开各种页面
相关推荐
文档Scroll滚动到顶/底部后，下/上拖执行自定义方法
文档页面滚动到某个距离后禁止继续向下滚动
文档滑动组件的偏移量如何获取
文档Scroll内Web嵌套其他组件时滑动优先级设置
文档进入页面后，页面自动滑动
文档Web页面显示内容滚动
文档List组件滑动时如何控制滑动幅度和滑动范围
文档Scroll内容区的高度小于组件高度，是否无法滑动
文档标题栏与底部的列表条目无法一起滑动
文档判断滚动与滑动容器组件的子组件是否可见
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词