webbrowser内容滚动（javascript内容无缝滚动）
一 使用webbrowser现有方法
引用：https://blog.csdn.net/xiaokailele/article/details/48392673
public partial class Form1 : Form { int current = 0; Timer timeDown = new Timer(); Timer timeUp = new Timer(); public Form1() { InitializeComponent(); webBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webBrowser1_DocumentCompleted); webBrowser1.Navigate("http://www.yahoo.com.cn"); timeDown.Interval = 100; timeDown.Tick += new EventHandler(timeDown_Tick); timeUp.Interval = 100; timeUp.Tick += new EventHandler(timeUp_Tick); } void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) { current = 0; timeDown.Enabled = true; } void timeDown_Tick(object sender, EventArgs e) { HtmlDocument doc = webBrowser1.Document; int height = webBrowser1.Document.Body.ScrollRectangle.Height; current += height / 100; if (current >= height) { current = height; timeDown.Enabled = false; timeUp.Enabled = true; } doc.Window.ScrollTo(new Point(0, current)); } void timeUp_Tick(object sender, EventArgs e) { HtmlDocument doc = webBrowser1.Document; int height = webBrowser1.Document.Body.ScrollRectangle.Height; current -= height / 100; if (current <= 0) { current = 0; timeUp.Enabled = false; } doc.Window.ScrollTo(new Point(0, current)); } }
二 使用javascript
<!DOCTYPE html> <html lang='en' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta charset="utf-8" /> <title>内容循环滚动</title> <style type="text/css"> .bg { position: relative; width: 800px; height: 300px; overflow: hidden; border: 1px solid; } .content1 { width: 700px; position: absolute; top: 8px; } .content2 { width: 700px; position: absolute; visibility: hidden; } </style> <script type="text/javascript"> var y = 0; var myLoop; var scrollStatus = false; function ScrollLoop() { var content1 = document.getElementById('content1'); var content2 = document.getElementById('content2'); var height1 = parseInt(content1.offsetHeight); var height2 = parseInt(content2.offsetHeight); y -= 1; if (parseInt(content1.style.top) < parseInt(content2.style.top)) { content1.style.top = y + 'px'; content2.style.top = y + height1 + 'px'; if (parseInt(content2.style.top) <= 0) { y = parseInt(content2.style.top); content1.style.top = parseInt(content2.style.top) + height2 + 'px'; } } else { content2.style.top = y + 'px'; content1.style.top = y + height2 + 'px'; if (parseInt(content1.style.top) <= 0) { y = parseInt(content1.style.top); content2.style.top = parseInt(content1.style.top) + height1 + 'px'; } } } function ResetLoopTime() { clearInterval(myLoop); var time = document.getElementById('textTime').value; myLoop = setInterval(ScrollLoop, time); scrollStatus = true; } function startScrollLoop(isResetY, loopTime) { var content1 = document.getElementById('content1'); var content2 = document.getElementById('content2'); if (isResetY) { y = 6; content1.style.top = y + 'px'; content2.style.top = y + parseInt(content1.offsetHeight) + 'px'; } clearInterval(myLoop); content2.style.visibility = 'visible'; myLoop = setInterval(ScrollLoop, loopTime); scrollStatus = true; } function stopScrollLoop(reset) { clearInterval(myLoop); scrollStatus = false; } function reset() { document.getElementById('content2').style.visibility = 'hidden'; document.getElementById('content1').style.top = 6 + 'px'; } function getTextHeight() { return parseInt(document.getElementById('content1').offsetHeight); } function getScrollStatus() { return scrollStatus; } </script> </head> <body> <div> <input type="button" onclick="startScrollLoop(true, 10)" value="开始滚动" /> <input type="button" onclick="stopScrollLoop()" value="停止滚动" /> <input type="button" onclick="getTextHeight()" value="获取内容高" /><br> <input type="text" id="textTime" /> <input type="button" onclick="ResetLoopTime()" value="重新设置滚动时间" /> </div> <div class='bg'> <div class="content1" id="content1"> <p>pppppppppppppppppp1</p> <p>pppppppppppppppppp2</p> <p>pppppppppppppppppp3</p> <p>pppppppppppppppppp4</p> <p>pppppppppppppppppp5</p> <p>pppppppppppppppppp6</p> <p>pppppppppppppppppp7</p> <p>pppppppppppppppppp8</p> <p>pppppppppppppppppp9</p> <p>pppppppppppppppppp10</p> </div> <div class="content2" id="content2"> <p>pppppppppppppppppp1</p> <p>pppppppppppppppppp2</p> <p>pppppppppppppppppp3</p> <p>pppppppppppppppppp4</p> <p>pppppppppppppppppp5</p> <p>pppppppppppppppppp6</p> <p>pppppppppppppppppp7</p> <p>pppppppppppppppppp8</p> <p>pppppppppppppppppp9</p> <p>pppppppppppppppppp10</p> </div> </div> </body> </html>
webbrowser调用
private void ControlScroll() { if (!IsAutoScroll) return; bool scrollStatus = (bool)webbrowser1.Document.InvokeScript("getScrollStatus"); int height = (int)((int)webbrowser1.Document.InvokeScript("getTextHeight") * Convert.ToDouble(currDisplayRate) / 100); if (height > webbrowser1.Height) { if (!scrollStatus) { webbrowser1.Document.InvokeScript("startScrollLoop", new object[] { true, LoopTime }); webbrowser1.ScrollBarsEnabled = false; } } else { if (scrollStatus) { webbrowser1.ScrollBarsEnabled = true; webbrowser1.Document.InvokeScript("stopScrollLoop"); webbrowser1.Document.InvokeScript("reset"); } } } }
三 结果：
我选择使用第二种方法，因为我是通过比较网页内容的高度和webbrowser的高度来确定是否滚动的
第一种相对于第二种
（1）进行网页的缩放处理 webBrowser1.Document.Body.ScrollRectangle.Height 这个值是不变的，不能用来确定何时内容滚动
（2）触底事件不好判断
（3）实现内容无缝循环，不如js方便
