WebView2　応用テクニック

画面の情報を取得する＆画面をスクロールする

Webページのサイズや、表示している画面のサイズ、画面スクロールの位置の取得方法です。
また、表示中の画面をスクロールさせる方法です。

WebView2コントロール使用時

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage_scroll.html)を使っています

						Dim js As New System.Text.StringBuilder()
				
						'Web画面の情報を取得する
						js.AppendLine("alert('Webページのhtml部分のサイズ　幅：' + document.documentElement.scrollWidth + ' 高さ：' + document.documentElement.scrollHeight);")
						js.AppendLine("alert('Webページのbody部分のサイズ　幅：' + document.body.scrollWidth + '　高さ：' + document.body.scrollHeight);")
						js.AppendLine("alert('Webページのbody部分のサイズ　幅：' + document.body.clientWidth + '　高さ：' + document.body.clientHeight);")
						js.AppendLine("alert('Webページのbody部分のサイズ　幅：' + document.body.offsetWidth + '　高さ：' + document.body.offsetHeight);")
						js.AppendLine("alert('表示している画面のhtml部分のサイズ　幅：' + document.documentElement.clientWidth + '　高さ：' + document.documentElement.clientHeight);")
						js.AppendLine("alert('表示している画面のhtml部分のサイズ　幅：' + document.documentElement.offsetWidth + '　高さ：' + document.documentElement.offsetHeight);")  'offsetHeightはWebページの高さが取得される
						js.AppendLine("alert('表示している画面のスクロールバーを含めたのサイズ　幅：' + window.innerWidth + '　高さ：' + window.innerHeight);")
						js.AppendLine("alert('表示している画面のスクロールバーを含めたのサイズ　幅：' + window.outerWidth + '　高さ：' + window.outerHeight);")
						js.AppendLine("alert('スクロール量　Ｘ：' + document.documentElement.scrollLeft + '　Ｙ：' + document.documentElement.scrollTop);")
				
						'画面スクロール
						js.AppendLine("window.scrollTo(100, 100);")    '座標100,100にスクロールさせる
						js.AppendLine("window.scrollBy(10, 10);")      '指定した座標分だけスクロールさせる
				
						Await webView2.ExecuteScriptAsync(js.ToString())
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage_scroll.html)を使っています

						var js = new System.Text.StringBuilder();
			
						//Web画面の情報を取得する
						js.AppendLine("alert('Webページのhtml部分のサイズ　幅：' + document.documentElement.scrollWidth + ' 高さ：' + document.documentElement.scrollHeight);");
						js.AppendLine("alert('Webページのbody部分のサイズ　幅：' + document.body.scrollWidth + '　高さ：' + document.body.scrollHeight);");
						js.AppendLine("alert('Webページのbody部分のサイズ　幅：' + document.body.clientWidth + '　高さ：' + document.body.clientHeight);");
						js.AppendLine("alert('Webページのbody部分のサイズ　幅：' + document.body.offsetWidth + '　高さ：' + document.body.offsetHeight);");
						js.AppendLine("alert('表示している画面のhtml部分のサイズ　幅：' + document.documentElement.clientWidth + '　高さ：' + document.documentElement.clientHeight);");
						js.AppendLine("alert('表示している画面のhtml部分のサイズ　幅：' + document.documentElement.offsetWidth + '　高さ：' + document.documentElement.offsetHeight);");  //offsetHeightはWebページの高さが取得される
						js.AppendLine("alert('表示している画面のスクロールバーを含めたのサイズ　幅：' + window.innerWidth + '　高さ：' + window.innerHeight);");
						js.AppendLine("alert('表示している画面のスクロールバーを含めたのサイズ　幅：' + window.outerWidth + '　高さ：' + window.outerHeight);");
						js.AppendLine("alert('スクロール量　Ｘ：' + document.documentElement.scrollLeft + '　Ｙ：' + document.documentElement.scrollTop);");
			
						//画面スクロール
						js.AppendLine("window.scrollTo(100, 100);");    //座標100,100にスクロールさせる
						js.AppendLine("window.scrollBy(10, 10);");      //指定した座標分だけスクロールさせる
			
						await webView2.ExecuteScriptAsync(js.ToString());

参考

window.scrollTo