electron-scroller
v0.6.2
Published
Manage scrolling of content inside an Electron webview element.
Downloads
12
Maintainers
schlameelReadme
Electron Scroller
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-scrollerQuick 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()