一 使用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方便

webbrowser内容滚动（javascript内容无缝滚动）的更多相关文章

  1. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  2. JavaScript实现无缝滚动 原理详细讲解

    先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...

  3. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  4. javascript实现的可改变滚动方向的无缝滚动

    效果图如下: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  5. 利用JavaScript做无缝滚动

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  6. Javascript图片无缝滚动

    http://www.cnblogs.com/shouce/p/5068787.html

  7. JS无缝滚动

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  8. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  9. 实现文字左右滚动 javascript

    参考链接:http://www.86y.org/art_detail.aspx?id=587 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

随机推荐

  1. git之切换分支出现的问题

    当在其他分支,如test分支开发的时候,新增了文件夹等目录结构.开发完成后,切换会master分支. 如果出现“Deletion of directory '***' failed. Should I ...

  2. poj 3421 X-factor Chains——质因数分解

    题目:http://poj.org/problem?id=3421 记忆化搜索竟然水过去了.仔细一想时间可能有点不对,但还是水过去了. #include<iostream> #includ ...

  3. bzoj 2982 combination——lucas模板

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2982 明明是lucas定理裸题…… 非常需要注意C( )里  if ( n<m ) r ...

  4. 聊聊基于Lucene的搜索引擎核心技术实践

    最近公司用到了ES搜索引擎,由于ES是基于Lucene的企业搜索引擎,无意间在“聊聊架构”微信公众号里发现了这篇文章,分享给大家. 请点击链接:聊聊基于Lucene的搜索引擎核心技术实践

  5. Spark on yarn的两种模式 yarn-cluster 和 yarn-client

    从深层次的含义讲,yarn-cluster和yarn-client模式的区别其实就是Application Master进程的区别,yarn-cluster模式下,driver运行在AM(Applic ...

  6. 非常不错的LTE架构讲解

    <LTE系统协议架构---通俗易懂超经典> <3GPP协议导读> <3GPP协议36211-850中文翻译> <LTE全套协议汇总> <NB-IO ...

  7. git 学习 多个提交用同一个commit

    git add .git commit --amend(连续按连个ZZ)git push -f origin ibm_branch(命令行可能不好用,用IDEA force push好用)

  8. malloc 动态分配内存

    很久没有学习C了,复习下,有时候觉的C特别优美,学习算法和数据结构最佳选择. #include "stdafx.h" #include<stdlib.h> int ma ...

  9. python web框架 Django进阶

    django 进阶 基础中,一些操作都是手动创建连接的非主流操作,这样显得太low,当然也是为了熟悉这个框架! 实际中,django自带连接数据库和创建app的机制,同时还有更完善的路由系统机制.既然 ...

  10. 程序中使用log4J打印信息的两种方式

    (1)通过org.apache.commons.logging.Log 接口实例化: public static Log log = LogFactory.getLog(String name); p ...