Electron中如何检测BrowserView内页面的滚动距离？

需求：在Electron的BrowserView渲染的网页中检测用户的滚动距离。

尝试过的操作：

1. 监听input-event的gestureScrollEnd事件，能成功捕获事件，但无法获取滚动量：

view.webContents.on('input-event', (event, input) => {
      if (input.type === 'gestureScrollEnd') {
          console.log("viewManager-wiew.webContents.on('input-event')-input: ", input)
      }
  })

输出结果：

viewManager-wiew.webContents.on('input-event')-input:  { type: 'gestureScrollEnd', 
modifiers: [], _modifiers: 0 }

2. 尝试用window.scrollTop等属性检测滚动量，但主进程的webContents无法直接访问渲染页的window/document，获取不到值：

setTimeout(function () {
    console.log("window.scrollTop: ", window.scrollTop)
    console.log("document.body.scrollTop: ", document.body.scrollTop)
     console.log("document.documentElement.scrollTop: ", document.documentElement.scrollTop)   
}, 5)
clearTimeout()

3. 更新尝试：用executeJavaScript执行代码，但无输出，渲染页也收不到消息：
   主进程代码：

let scrollTop = 0

view.webContents.on('input-event', (event, input) => {
    if (input.type === 'gestureScrollEnd') {
        console.log("viewManager-wiew.webContents.on('input-event')-input: ", input)

        view.webContents.executeJavaScript(`console.log("viewManager-input-event-document.body.scrollTop: ", document.body.scrollTop)`)

        view.webContents.executeJavaScript(`scrollTop = document.body.scrollTop`)

        view.webContents.send("get-scroll-amount", {
            viewId: id,
            scroll_amount: scrollTop,
        })

    }
})

渲染页（React）代码：

React.useEffect(() => {
        window.api.electronIpcOn("get-scroll-amount", (event, args) => {
            console.log("App_S-get-scroll-amount- args: ", args)
        })
    },[])

方法一：在BrowserView页面内主动监听滚动事件并上报 #

直接在BrowserView加载的网页中监听scroll事件，通过IPC把滚动量发送给主进程，这种方式更可靠，无需依赖主进程的input-event。

1. 主进程监听IPC消息：

// 主进程代码
const { ipcMain } = require('electron');

ipcMain.on('browser-view-scroll', (event, data) => {
    console.log(`View ${data.viewId} 滚动距离: ${data.scrollTop}`);
    // 此处处理滚动相关逻辑
});

2. BrowserView的React页面中监听滚动并发送消息：

// BrowserView的React页面代码
import { ipcRenderer } from 'electron';

React.useEffect(() => {
    const handleScroll = () => {
        // 兼容不同场景的滚动距离获取
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        // 发送给主进程，带上viewId区分不同BrowserView
        ipcRenderer.send('browser-view-scroll', {
            viewId: YOUR_VIEW_ID, // 传入当前BrowserView的ID
            scrollTop: scrollTop
        });
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
}, []);

方法二：主进程通过executeJavaScript异步获取滚动量 #

如果必须在主进程的gestureScrollEnd事件触发时获取滚动量，需注意executeJavaScript是异步方法，必须通过Promise回调获取返回值，不能同步赋值。

主进程修正后的代码：

view.webContents.on('input-event', (event, input) => {
    if (input.type === 'gestureScrollEnd') {
        console.log("viewManager-wiew.webContents.on('input-event')-input: ", input);
        
        // 异步获取滚动距离
        view.webContents.executeJavaScript(`
            window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
        `).then(scrollTop => {
            console.log(`当前滚动距离: ${scrollTop}`);
            // 发送给渲染页（若需要）
            view.webContents.send("get-scroll-amount", {
                viewId: id,
                scroll_amount: scrollTop,
            });
        }).catch(err => {
            console.error('获取滚动距离失败:', err);
        });
    }
});

同时确保BrowserView的渲染页正确监听IPC消息：

// BrowserView的React页面代码
import { ipcRenderer } from 'electron';

React.useEffect(() => {
    const listener = (event, args) => {
        console.log("App_S-get-scroll-amount- args: ", args);
    };
    ipcRenderer.on('get-scroll-amount', listener);
    return () => ipcRenderer.removeListener('get-scroll-amount', listener);
}, []);

常见问题排查 #

1. 若使用封装后的window.api，需确认electronIpcOn是否正确封装了ipcRenderer.on，避免封装错误导致收不到消息。
2. 确保BrowserView的网页加载完成后再执行executeJavaScript，可通过view.webContents.on('did-finish-load', () => { ... })监听加载完成事件。
3. 滚动距离的获取要兼容不同情况，优先使用window.pageYOffset，再降级到document.documentElement.scrollTop或document.body.scrollTop。

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