如何阻止TMS WEB Core应用中非滚动内容的意外刷新行为？

以下是几个经过验证的解决方案，可针对性解决非滚动元素/短列表滑动触发页面刷新的问题：

• 全局拦截顶部下拉刷新行为
  在主窗体的OnCreate事件中嵌入JavaScript代码，监听触摸事件，当页面已滚动到顶部且用户执行下拉动作时，阻止浏览器的默认刷新行为：

  procedure TForm1.WebFormCreate(Sender: TObject);
  begin
    asm
      let startY = 0;
      document.addEventListener('touchstart', e => {
        startY = e.touches[0].clientY;
      });
      document.addEventListener('touchmove', e => {
        const currentY = e.touches[0].clientY;
        // 仅在页面顶部且下拉时阻止默认行为
        if (window.scrollY === 0 && currentY > startY) {
          e.preventDefault();
        }
        startY = currentY;
      }, { passive: false });
    end;
  end;
  

  该方案不会影响页面中可滚动元素的正常滑动，仅拦截触发刷新的顶部下拉动作。

• 针对可滚动控件的精细化处理
  对于TWebListBox这类列表控件，判断其是否具备滚动能力（内容高度超过视口），仅当控件无法滚动时阻止滑动触发的默认行为：

  procedure TForm1.WebListBox1Create(Sender: TObject);
  begin
    asm
      const listEl = this.Element;
      listEl.addEventListener('touchstart', e => {
        listEl.dataset.startY = e.touches[0].clientY;
        listEl.dataset.scrollTop = listEl.scrollTop;
      });
      listEl.addEventListener('touchmove', e => {
        const startY = parseInt(listEl.dataset.startY);
        const currentY = e.touches[0].clientY;
        const scrollTop = parseInt(listEl.dataset.scrollTop);
        // 列表已到顶部且下拉，或已到底部且上拉时，阻止默认行为
        const isAtTop = scrollTop === 0 && currentY > startY;
        const isAtBottom = scrollTop + listEl.clientHeight >= listEl.scrollHeight && currentY < startY;
        if (isAtTop || isAtBottom) {
          e.preventDefault();
        }
      }, { passive: false });
    end;
  end;
  

  此方案确保短列表（无滚动空间）的滑动不会触发页面刷新，同时不影响长列表的正常滚动交互。

• 禁用浏览器原生下拉刷新（全局兜底）
  如果上述方案仍有遗漏，可直接全局禁用浏览器的下拉刷新机制，适用于整个应用无需原生下拉刷新的场景：

  procedure TWebModule1.WebModuleCreate(Sender: TObject);
  begin
    asm
      window.addEventListener('touchmove', e => {
        // 始终阻止顶部下拉的默认行为
        if (window.scrollY === 0) {
          e.preventDefault();
        }
      }, { passive: false });
    end;
  end;
  

  注意：全局拦截可能影响部分依赖原生触摸行为的控件，需充分测试后使用。

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