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;
             800px;
            height: 300px;
            overflow: hidden;
            border: 1px solid;
        }

        .content1 {
             700px;
            position: absolute;
            top: 8px;
        }

        .content2 {
             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方便

webbrowser内容滚动（javascript内容无缝滚动）

一 使用webbrowser现有方法

二 使用javascript

三 结果：

一使用webbrowser现有方法

二使用javascript

三结果：