Electron Scroller is a package designed to manage scrolling of historical pages in <webview> tags. Webviews in electron manage page history, offering forward and back, but when navigating to the pages, the scroll position is lost. This package allows you to maintain the scroll position and automatically reposition the page to the proper scroll position upon navigation (back, forward, reload).

Installation

To install Electron Scroller, use npm. The preferred method is to install Electron Scroller as an dependency in your app:

npm install --save electron-scroller

Quick Start

It is necessary to include Electron Scroller in two places in your app:

In your render javascript (called via a <script> in the HTML source)
In the preload file (specified in the <webview preload="file.js")

Example HTML

<!DOCTYPE html>
<html>
<head>
  <title>Browser</title>
</head>
<body>
  <div id="buttonBar">
    ...
  </div>
  <div id="browser">
    <webview id="browserView" preload="preload.js"></webview>
  </div>
  <script src="browser.js"></script>
</body>
</html>

Render Javascript

Require the package and use the add() method. Pass to add() a string containing a single CSS selector that describes the specific webview to be managed. If only a single webview exists, the selector is not required. Because the Scroller hooks into the methods of the webview, it may be best to call add() early in the process and before configuring the webview. In this example, in the file browser.js:

const scroller = require('electron-scroller')

onload = function() {
  let selector = '#browserView'
  scroller.add(selector)
  // The selector is not required if there is only a single webview:
  // scroller.add()
}

Preload Javascript

The Scroller has to be included in the preload file by calling the preload() method. It is not necessary to pass the selector. In this example, in the file preload.js:

require('electron-scroller').preload()

License

ISC

Keywords

FAQs

What is electron-scroller?

Is electron-scroller popular?

Is electron-scroller well maintained?

Last updated on 30 Apr 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install