How can I scroll content of <webview> tag from JavaScript?

Question

• atom-shell: https://github.com/atom/atom-shell
• version: v0.20.2

I am using <webview> tag to embed a page. <webview> tag has shadow-root which has one tag, <object id="browser-plugin-1 ...> . So I tried to set scrollTop value for this tag like this.

var webView = document.getElementById('webview tag id');
var elm = webView.shadowRoot.firstChild; // elm is object tag
console.log(elm.scrollTop);  // 0
elm.scrollTop = 100;
console.log(elm.scrollTop);  // 0

But nothing happend...
Is it possible to control <webview> tag scroll position from outside?

Answer 1

Yes, do this instead:

var webView = document.getElementById('webview tag id');
webView.executeJavaScript("document.querySelector('body:first-child').scrollTop=100");

Answer 2

It's possible to execute any kind of javascript via the WebView.executeJavaScript(code) function which will evaluate the code inside the WebView.

To access your element you would first have to wait for the WebView to load, and then execute the javascript.

var webView = document.getElementById('webView');
webView.addEventListener('did-finish-load', scrollElement );

function scrollElement(){
    var code = "var elm = document.querySelector('body:first-child'); elm.scrollTop = 100;";
    webView.executeJavaScript(code);
}

Note : Haven't tested this code, it may have syntax errors.

Source (AtomShell's WebView tag documentation)