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).
To install Electron Scroller, use npm. The preferred method is to install Electron Scroller as an dependency in your app:
npm install --save electron-scrollerIt 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")
<!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>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()
}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()