在WP8中，控件WebBrowser没有提供对滚动条的支持，而在内置的IE中，却可以显示出滚动条（微软这是在坑我们吗），但如果在客户端使用Webbrowser的话，自己构造ScrollBar来显示

　　通过javascript监听onscroll事件，然后传递给Webbrowser，通过onscroll的位置来确定自定义的ScrollBar的位置

下面演示方法：

1、在Html代码中添加javascript代码





function initialize() {

    window.external.notify("scrollHeight=" + document.body.scrollHeight.toString());

    window.external.notify("clientHeight=" + document.body.clientHeight.toString());

    window.onscroll = onScroll;

}

function onScroll(e) {

    var scrollPosition = document.body.scrollTop;

    window.external.notify("scrollTop=" + scrollPosition.toString());

}

window.onload = initialize;






2、在xaml中定义控件




        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <phone:WebBrowser x:Name="ContentWebBrowser" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"IsScriptEnabled="True" ScriptNotify="ContentWebBrowser_ScriptNotify"/>

            <ScrollBar x:Name="DisplayScrollBar" Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Stretch" Minimum="0" Maximum="100" Value="0"/>

        </Grid>




3、在Webbrowser添加 ScriptNotify 事件方法（注意：需要将Webbrowser的IsScriptEnabled属性设为True）






        private void ContentWebBrowser_ScriptNotify(object sender, NotifyEventArgs e)

        {

            var parts = e.Value.Split('=');

            if (parts.Length != ) return;    

            var number = ;

            if (!int.TryParse(parts[], out number)) return;

            switch (parts[])

            {

                case "scrollHeight":

                    _scrollHeight = number;

                    if (_visibleHeight > )

                    {

                        DisplayScrollBar.Maximum = _scrollHeight - _visibleHeight;

                    }

                    break;

                case "clientHeight":

                    _visibleHeight = number;

                    if (_scrollHeight > )

                    {

                        DisplayScrollBar.Maximum = _scrollHeight - _visibleHeight;

                    }

                    break;

                case "scrollTop":

                    DisplayScrollBar.Value = number;

                    break;

            }

        }






3、测试


　　1）、定义一个WebBrowserHelper生成Html代码




    public class WebBrowserHelper

    {

        public static string NotifyScript

        {

            get

            {

                return @"<script>

                    window.onload = function(){

                        initialize();

                    }

                    function initialize() {

                        window.external.notify('scrollHeight=' + document.body.scrollHeight.toString());

                        window.external.notify('clientHeight=' + document.body.clientHeight.toString());

                        //window.onscroll = onScroll;

                    }

                    function onScroll(e) {

                        var scrollPosition = document.body.scrollTop;

                        window.external.notify('scrollTop=' + scrollPosition.toString());

                    }

                    </script>";

            }

        }

        public static string WrapHtml(string bodyContent, double viewportWidth)

        {

            var html = new StringBuilder();

            html.Append("<html>");

            html.Append(HtmlHeader(viewportWidth));

            html.Append("<body>");

            html.Append(bodyContent);

            html.Append("</body>");

            html.Append(NotifyScript);

            html.Append("</html>");

            return html.ToString();

        }

        public static string HtmlHeader(double viewportWidth)

        {

            var head = new StringBuilder();

            head.Append("<head>");

            head.Append(string.Format("<meta name=\"viewport\" value=\"width={0}\" user-scalable=\"no\" />",

                                      viewportWidth));

            head.Append("</head>");

            return head.ToString();

        }

    }




　　2）传入HTML运行




var html = WebBrowserHelper.WrapHtml(

                    @"<div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>", ContentWebBrowser.Width);

            ContentWebBrowser.NavigateToString(html);




测试成功。


参考：http://www.mistergoodcat.com/post/Somethings-Missing-from-the-WebBrowser-Control
												


											
【WP8】为Webbrowser添加ScrollBar的更多相关文章
	

    
								
  1. 【WP8】WebBrowser相关
		
    2014年09月02日更新 今天用了一下WebBrowser,在使用过程中也遇到了一些问题,在这里做一下记录 虽然WebBrowser比较重,会比较影响性能(除非一定要用到它,否则尽量少用),但有时候 ...
    
		
    2. 
						
  2. 【WP8.1】WebView笔记
		
    之前在WP8的时候做过WebBrowser相关的笔记,在WP8.1的WebView和WebBrowser有些不一样,在这里做一些笔记 下面分为几个部分 1.禁止缩放 2.JS通知后台C#代码(noti ...
    
		
    3. 
						
  3. UGUI之Scrollbar使用
		
    这个效果主要用到了3个组件(对象): 1:Scrollbar对象  滚动条 2:Scroll Rect组件  让对象具有滑动效果 3:Mask组件  遮罩层.把多余的部分隐藏不显示 Scrollbar ...
    
		
    4. 
						
  4. WPF 使用winform的webbrowser
		
    首先要添加如下引用: WindowsFormsIntegration System.Drawing System.Windows.Forms 然后在xaml中添加引用 xmlns:winform=&q ...
    
		
    5. 
						
  5. Unity实现滑页效果（UGUI）
		
    简介 项目需要...直接展示效果吧: 原理 使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果. 实现过程 1.创建两个panel,上面 ...
    
		
    6. 
						
  6. uGUI练习(七) Drag And Drop
		
    练习目标 练习UI的拖放操作 一.相关组件 EventTrigger Canvas Group ScrollRect Mask Scrollbar 二.拖放练习 1.创建一个Panel,命名Panel ...
    
		
    7. 
						
  7. uGUI练习(六) ScrollView
		
    练习目标 练习uGUI的滑动组件 一.相关组件 ScrollRect Mask Grid Layout Group Scrollbar 二.步骤 1.创建一个Panel,命名为ScrollRect,添 ...
    
		
    8. 
						
  8. Windows phone 8 学习笔记(2) 数据文件操作（转）
		
    Windows phone 8 应用用于数据文件存储访问的位置仅仅限于安装文件夹.本地文件夹(独立存储空间).媒体库和SD卡四个地方.本节主要讲解它们的用法以及相关限制性.另外包括本地数据库的使用方式 ...
    
		
    9. 
						
  9. Windows phone 8 学习笔记(2) 数据文件操作
		
    原文:Windows phone 8 学习笔记(2) 数据文件操作 Windows phone 8 应用用于数据文件存储访问的位置仅仅限于安装文件夹.本地文件夹(独立存储空间).媒体库和SD卡四个地方 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JAVA-JSP内置对象之page对象调用Servlet
			
    相关资料:<21天学通Java Web开发> page对象1.page对象代表JSP转译后的Servlet.2.通过page对象可以非常方便地调用Servlet类中定义的方法. pageD ...
    
			
    2. 
						
  2. web开发经验
			
    图片显示不全 网站进行了迁移,更换了新框架,结果出现了图片显示不全的问题,后来发现是nginx权限问题 curl 无报错,无返回 有可能是url错误,而无服务器对错误的url返回空,没返回错误
    
			
    3. 
						
  3. java框架篇---Struts2的处理流程
			
    一.Struts2的处理流程: 客户端产生一个HttpServletRequest的请求,该请求被提交到一系列的标准过滤器(Filter)组建链中(如ActionContextCleanUp:它主要是 ...
    
			
    4. 
						
  4. lateral view
			
    原文地址:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+LateralView# lateral view用于和spl ...
    
			
    5. 
						
  5. Python使用4个空格替换Tab， TabError: inconsistent use of tabs and spaces in indentation。
			
    问题:以前使用Pycharm和VsCode没遇到问题,使用nodepat++老是提示Tab异常  TabError: inconsistent use of tabs and spaces in in ...
    
			
    6. 
						
  6. java.io.ByteArrayOutputStream 源码分析
			
    ByteArrayOutputStream 内部包含了一个缓冲区,缓冲区会随着数据的不断写入而自动增长,俗称内存流. 首先看一下俩个属性,buf是内部缓冲区,count是记录写入了多少个字节. pro ...
    
			
    7. 
						
  7. 负数在计算机中的表示 Byte-128
			
    本文转载: http://blog.csdn.net/njuitjf/article/details/4585247 原码:将一个整数,转换成二进制,就是其原码.如单字节的5的原码为:0000 010 ...
    
			
    8. 
						
  8. 在Linux下用make指令编译进度条程序。
			
    首先建立一个新的文件,touch progress_bar.c 运行该vim progress_bar.c命令.写进度条的程序. 写进一个进度条程序: #include<stdio.h>  ...
    
			
    9. 
						
  9. 解析Google集群资源管理系统Omega
			
    1. 背景 Google的第一代/第二代集群(资源)管理系统被称为Borg,Borg设计细节因零零星星出现在各种文章中而知名,但一直未公开(比如发一篇paper).然而,我们可从腾讯公布的Torca( ...
    
			
    10. 
						
  10. 在天河二号上对比Julia，Python和R语言
			
    Julia是一款高级高效为技术计算(technical computing)而设计的编程语言,其语法与其他计算环境类似.其为分布式计算和并行所设计,最知名的地方在于其接近C语言的高效率. 按开发者的话 ...
    
			
    11.