Blockly组件鼠标悬停阻止页面滚动问题解决方案咨询

问题描述 #

当鼠标悬停在Blockly的灰色flyout区域（对应blocklyFlyout元素）时，页面无法正常滚动。由于应用中使用的Blockly实例尺寸较大，该问题已影响用户体验，需要让该区域的滚动行为和普通HTML元素一致。

已尝试方案及缺陷 #

• 克隆替换blocklyFlyout元素移除所有事件监听器：恢复了页面滚动，但完全禁用了flyout内部的溢出滚动功能。
• 监听wheel事件同步到根元素：恢复页面滚动，但破坏了flyout自身的滚动逻辑。

可行解决方案 #

核心思路是判断flyout自身的滚动状态：当flyout已经滚动到顶部/底部边界时，再触发的滚动事件传递给页面；否则保留flyout自身的滚动行为。

实现代码如下：

const elements = document.getElementsByClassName("blocklyFlyout");
for (const flyout of elements) {
  flyout.addEventListener("wheel", function(event) {
    const isAtTop = flyout.scrollTop === 0;
    const isAtBottom = flyout.scrollTop + flyout.clientHeight === flyout.scrollHeight;

    // 当flyout在顶部且向上滚，或在底部且向下滚时，允许页面滚动
    const shouldPropagate = (isAtTop && event.deltaY < 0) || (isAtBottom && event.deltaY > 0);
    
    if (!shouldPropagate) {
      // 否则阻止事件冒泡，保留flyout自身滚动
      event.stopPropagation();
    }
    // 注意：不要调用event.preventDefault()，避免破坏默认滚动行为
  }, { passive: true });
}

原理说明 #

1. 检测blocklyFlyout的scrollTop、clientHeight和scrollHeight，判断是否处于滚动边界：
   • scrollTop === 0：已滚动到顶部
   • scrollTop + clientHeight === scrollHeight：已滚动到底部
2. 根据滚动方向（event.deltaY的正负，正为向下滚，负为向上滚），决定是否允许事件传递给页面：
   • 若flyout在顶部且用户向上滚动，此时flyout无法再向上滚，允许页面响应滚动
   • 若flyout在底部且用户向下滚动，同理允许页面响应滚动
   • 其他情况，阻止事件冒泡，让flyout自身处理滚动

这个方案既保留了flyout内部的滚动功能，又在边界时让页面正常滚动，完全模拟普通HTML元素的滚动行为。

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