0

I need to detect how much the user has scrolled on the webpage rendered with BrowserView in Electron

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

I actually get the gestureScrollEnd inputEvent :

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

I tried to detect the scrolling amount with window.scrollTop, document.scrollTop and document.documentElement.scrollTop :

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()

But, when scrolling within the webpage rendered by BrowserView I do not get the scrolling amount:

enter image description here

As far as I know, the only methods to detect how much the user has scrolled, use window and document scrollTop : Detecting by how much user has scrolled

But window and document are not accessible within webContents

How to do that?

Update 1)

I tried to execute Javascript within BrowserView's webContents, but, may be I'm doing something wrong, because it does not produce any output:

  let scrollTop = 0

  view.webContents.on('input-event', (event, input) => {
      if (input.type === 'gestureScrollEnd') {
          console.log("viewManager-wiew.webContents.on('input-event')-input: ", input)
          // https://stackoverflow.com/questions/11373741/detecting-by-how-much-user-has-scrolled?rq=3

          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,
          })

      }
  })

And in the rendering page:

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

But, I do not get any output

Raphael10
  • 2,508
  • 7
  • 22
  • 50
  • what about use window and document scrollTop and send it via ipcRenderer and IpcMain? – YAGOUBI A.E.K Jul 20 '23 at 16:51
  • Hi @YAGOUBIA.E.K ! Already tried it. I updated my post above with the output – Raphael10 Jul 20 '23 at 17:08
  • you can't execute JS in the webcontents to get that info? (not saying it's the best way, but an idea) – pushkin Jul 20 '23 at 22:14
  • @pushkin I tried with ` view.webContents.executeJavaScript` but I don't get any output. May be I'm doing something wrong (I updated my post above) – Raphael10 Jul 21 '23 at 08:19
  • I believe you want to do something like: `const scrollTop = await view.webContents.executeJavaScript("document.body.scrollTop")` – pushkin Jul 21 '23 at 14:56

0 Answers0