javascript - 如何滚动内容来自 JavaScript 的标签？

Question

• 原子壳：https ://github.com/atom/atom-shell
• 版本：v0.20.2

我正在使用<webview>标签嵌入页面。<webview>tag hasshadow-root哪个有一个标签，<object id="browser-plugin-1 ...>. scrollTop所以我试着像这样为这个标签设置值。

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

但是什么也没发生...
是否可以<webview>从外部控制标签滚动位置？

Answer 1

是的，改为这样做：

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

Answer 2

WebView.executeJavaScript(code)可以通过评估 WebView 内代码的函数执行任何类型的 javascript 。

要访问您的元素，您首先必须等待 WebView 加载，然后执行 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);
}

注意：尚未测试此代码，它可能有语法错误。

来源（AtomShell 的 WebView 标签文档）