在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. ASP.NET学习笔记（4）——上传图片
			
    说明(2017-10-8 23:03:43): 1. 后面的内容都是一些杂七杂八的,零零碎碎的,之前都直接略过了,不过其实还是挺重要的,这次重新学习要认认真真敲一遍. 2. 明天中午9号要回北京了,今 ...
    
			
    2. 
						
  2. EntityFramework Model有外键时，Json提示循环引用 解决方法
			
    正文之前先说两句,距离上篇博客已将近两个月,这方面的学习和探索并没有停止,而是前进道路上遇上了各种各样的问题,需要不断的整理.反思和优化,这段时间的成果,将在最近陆续整理发出来. 个人感觉国内心态太浮 ...
    
			
    3. 
						
  3. Linux 常用命令随笔（一）
			
    Linux 常用命令随笔(一) 1.检查linux服务器的文件系统的磁盘空间 df -h 说明: -h更具目前磁盘空间和使用情况 以更易读的方式显示 -H根上面的-h参数相同,不过在根式化的时候,采用 ...
    
			
    4. 
						
  4. ntpd与ntpdate的区别
			
    之前配置ntpd的时候搜到一句话,印象很深刻,也觉得很有标题党的效果,就借鉴为标题了:“我认为有几种人是必须不招聘/裁掉的: 1 用ntpdate代替ntpd的人”但具体原因不太懂,总觉得还是用ntp ...
    
			
    5. 
						
  5. (DNS)dnsmasq部署DNS
			
    转自:https://www.hi-linux.com/posts/30947.html Dnsmasq提供DNS缓存和DHCP服务.Tftp服务功能.作为域名解析服务器(DNS),Dnsmasq可以 ...
    
			
    6. 
						
  6. VB6学习笔记
			
    1.数据库读取 [工程]菜单的[引用]菜单项,打开引用对话框,选中[Microsoft ActiveX Data Objects 6.1 Library] [工程]菜单的[引用]菜单项,打开引用对话框 ...
    
			
    7. 
						
  7. Windows安装Tomcat失败：Failed installing tomcat7 service
			
    今天在Win7下面安装tomcat(解压版),但是安装的时候老是弹出:Failed installing tomcat6 service.猜想是Win7安全权限管理的原因.网上搜了一下果然是这样. 解 ...
    
			
    8. 
						
  8. greendao数据库初次使用的配置及多表关联的初始化
			
    1.在工程外层(Project)的build.gradle中添加依赖 buildscript { repositories { jcenter() } dependencies { classpath ...
    
			
    9. 
						
  9. Android学习之发送及接收广播
			
    1.使用标准广播 1.1 定义广播接收器 public class MyBroadcastReceiver extends BroadcastReceiver { @Override public v ...
    
			
    10. 
						
  10. Python之collections.defaultdict
			
    转自:http://www.jb51.net/article/88147.htm
    
			
    11.