SAP UI5页面控件onscrollstart、onscrollstop事件无法触发问题咨询

问题原因 #

你绑定事件的目标控件不是实际产生滚动的DOM节点，且addEventDelegate里的onscrollstart/onscrollstop不是通用DOM事件，是SAP UI5内部封装给滚动组件使用的专属事件，直接给普通页面控件绑定不会触发。

优先解决方案：使用UI5自带滚动代理 #

SAP UI5的标准可滚动控件（比如sap.m.Page、sap.m.ScrollContainer）都内置了滚动代理实例，自带适配触控场景的scrollStart和scrollEnd事件，直接绑定即可：

onAfterRendering: async function () {
  const oTargetPage = this.byId("PAGECONTROLID");
  // 等待控件完全渲染加载完成
  await oTargetPage.loaded();
  // 获取控件内置的滚动代理
  const oScrollDelegate = oTargetPage.getScrollDelegate();

  // 绑定滚动开始事件
  oScrollDelegate.attachEvent("scrollStart", () => {
    console.log("滚动开始");
  });

  // 绑定滚动结束事件
  oScrollDelegate.attachEvent("scrollEnd", () => {
    console.log("滚动结束");
    // 此处放入你的视口检测逻辑
    const oLastFieldDom = this.byId("你要检测的最后一个字段控件ID").getDomRef();
    const oRect = oLastFieldDom.getBoundingClientRect();
    const isInViewport = oRect.top >= 0 && oRect.bottom <= window.innerHeight;
  });
}

备选方案：自定义模拟滚动起止事件 #

如果你的目标控件没有内置滚动代理，可以自己通过定时器实现滚动起止判断，兼容鼠标和触控场景：

onAfterRendering: function () {
  const oTargetPage = this.byId("PAGECONTROLID");
  // 获取实际产生滚动的内部DOM节点，可通过F12元素选择器确认滚动容器的类名修改选择器
  const oScrollDom = oTargetPage.getDomRef().querySelector(".sapMPageEnableScrolling");
  let scrollTimer = null;

  const handleScroll = () => {
    if (scrollTimer) {
      clearTimeout(scrollTimer);
    } else {
      console.log("滚动开始");
    }
    // 200毫秒无滚动事件触发则判定为滚动结束，可根据需求调整阈值
    scrollTimer = setTimeout(() => {
      scrollTimer = null;
      console.log("滚动结束");
      // 此处放入你的视口检测逻辑
    }, 200);
  };

  // 绑定原生滚动事件
  oScrollDom.addEventListener("scroll", handleScroll);

  // 页面销毁前解绑事件，避免内存泄漏
  this.getView().addEventDelegate({
    onBeforeExit: () => {
      oScrollDom.removeEventListener("scroll", handleScroll);
    }
  });
}

注意事项 #

• 绑定滚动事件前必须确认绑定的DOM是实际滚动容器：通过浏览器F12工具选中滚动区域，找到overflow属性为auto或scroll的节点即为目标滚动容器。
• 两种方案都天然适配触控设备的滑动滚动场景，不需要额外适配。

内容的提问来源于stack exchange，提问作者THI