我之前也碰到过一模一样的场景，WebView滚到边界后继续滚动会带动外层容器，确实影响体验。咱们一步步来解决这个问题：

为什么你之前的尝试没生效？ #

• 直接监听外层容器的wheel事件：当WebView已经处于滚动边界时，wheel事件会被WebView内部页面优先捕获，不会冒泡到外层容器，所以你的监听代码根本触发不了。
• 注入脚本监听document.wheel：大概率是没设置{ passive: false }——现在浏览器默认很多滚动事件是passive模式，这种情况下e.preventDefault()完全无效；另外如果脚本注入时机不对（比如页面还没加载完成），也没法正确绑定事件。

可行的解决方案 #

核心思路是：让WebView内部页面判断自身是否处于滚动边界，然后通知外层容器是否要阻止滚动。

步骤1：配置WebView的预加载脚本 #

先在预加载脚本（preload.js）里通过contextBridge暴露一个API，用来给外层传递滚动状态：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('scrollControl', {
  setPreventOuterScroll: (shouldPrevent) => {
    ipcRenderer.send('update-prevent-outer-scroll', shouldPrevent);
  }
});

步骤2：在WebView加载完成后注入滚动监听脚本 #

在渲染进程里，等WebView加载完成后，给内部页面注入监听代码，判断滚动边界：

const webview = document.getElementById('your-webview');
const outerScrollContainer = document.getElementById('outer-scroll-container');
let preventOuterScroll = false;

// 监听WebView加载完成事件
webview.addEventListener('did-finish-load', () => {
  webview.executeJavaScript(`
    document.addEventListener('wheel', (e) => {
      const scrollEl = document.scrollingElement;
      // 留8px误差避免页面padding、滚动条宽度导致的判断偏差
      const isAtBottom = scrollEl.scrollTop + scrollEl.clientHeight >= scrollEl.scrollHeight - 8;
      const isAtTop = scrollEl.scrollTop <= 8;

      // 当在底部向下滚/顶部向上滚时，通知外层阻止滚动
      const needPrevent = (isAtBottom && e.deltaY > 0) || (isAtTop && e.deltaY < 0);
      window.scrollControl.setPreventOuterScroll(needPrevent);
      if (needPrevent) e.preventDefault();
    }, { passive: false }); // 必须设置passive:false才能调用preventDefault
  `);
});

步骤3：监听IPC消息，控制外层容器滚动 #

在渲染进程里监听来自WebView的消息，动态阻止外层容器的滚动：

const { ipcRenderer } = require('electron');

ipcRenderer.on('update-prevent-outer-scroll', (_, shouldPrevent) => {
  preventOuterScroll = shouldPrevent;
});

// 给外层容器绑定wheel事件
outerScrollContainer.addEventListener('wheel', (e) => {
  if (preventOuterScroll) {
    e.preventDefault();
  }
}, { passive: false });

额外注意事项 #

• 如果WebView内部有嵌套iframe：你需要递归给每个iframe也注入同样的监听脚本，不过大部分场景下处理主文档就足够了。
• 测试全方向滚动：不仅要测试向下滚到底，还要测试向上滚到顶的情况，避免出现反向的滚动冲突。

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