webbrowser内容滚动(javascript内容无缝滚动)

一 使用webbrowser现有方法

引用:https://blog.csdn.net/xiaokailele/article/details/48392673

    public partial class Form1 : Form
{
int current = ;
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 = ;
timeDown.Tick += new EventHandler(timeDown_Tick);
timeUp.Interval = ;
timeUp.Tick += new EventHandler(timeUp_Tick); }
void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
current = ;
timeDown.Enabled = true;
}
void timeDown_Tick(object sender, EventArgs e)
{
HtmlDocument doc = webBrowser1.Document;
int height = webBrowser1.Document.Body.ScrollRectangle.Height;
current += height / ;
if (current >= height)
{
current = height;
timeDown.Enabled = false;
timeUp.Enabled = true;
} doc.Window.ScrollTo(new Point(, current));
}
void timeUp_Tick(object sender, EventArgs e)
{
HtmlDocument doc = webBrowser1.Document;
int height = webBrowser1.Document.Body.ScrollRectangle.Height;
current -= height / ;
if (current <= )
{
current = ;
timeUp.Enabled = false;
}
doc.Window.ScrollTo(new Point(, 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 = ;
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 -= ;
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) <= ) {
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) <= ) {
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 = ;
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 = + '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) / );
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方便

上一篇:hibernateTemplate API


下一篇:BIOS 搭配 MBR/GPT 的开机流程