在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