none
如何让 WebBrowser 自己的滚动条失效,使其使用父级的 ScrollViewer 的滚动条?(详) RRS feed

  • 问题

  • 就是我界面顶部有个图片,下面填满一个网页浏览器,我希望下滚时,Image+WebBrowser 是 “一体” 的,而不是现在这样,WebBrowser 自带滚动条一直滚,而 Image 始终在顶部,如果 Image 也能跟着滚就好了。

    下面是我的代码示例,这样做达不到我要的效果。

    <Grid x:Name="LayoutRoot">
        <ScrollViewer>
            <Grid>
                <省略行定义>
                <Image Source="/xxx.png" Grid.Row=0/>
                <WebBrowser Source="http:///abc.com" Grid.Row=1/>
            </Grid>
        <ScrollViewer>
    </Grid>

    2016年2月4日 14:53

答案

  • 在吗?非常感谢你的回答,我发现你的这个回答还是对我有用的,我现在通过你的方法隐藏 WebBrowser 的滚动条,然后为了达到我的效果,我必须让 WebBrowser 控件的高度和其内容高度一样(让 WB 超出屏幕,这样,外部包裹的滚动条才能生效),现在要解决的就是获取它的实际高度。你知道如何获取它的高度吗?

    *******更新补充*********

    找到方法(●'◡'●):

            private async void WebView_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
            {
                // 动态加载css
                var js = @"var myCss = document.createElement(""link"");
                         myCss.rel = ""stylesheet"";
                         myCss.type = ""text/css"";
                         myCss.href = ""ms-appx-web:///default.css"";
                         document.body.appendChild(myCss);
                         document.body.style.overflow = 'hidden';
                         window.external.notify(JSON.stringify(document.body.scrollHeight));";
                await sender.InvokeScriptAsync("eval", new[] { js });         
            }
    
            private void WebView_ScriptNotify(object sender, NotifyEventArgs e)
            {
                var wv = (WebView)sender;
                wv.Height = Convert.ToDouble(e.Value);
            }



    2016年2月5日 12:30

全部回复

  • 您好,

    WebBrowser的滚动条的显示与否是根据它加载的HTML页面来决定,你可以尝试去调用一些JS脚本隐藏HTML页面的滚动条,具体请参考我的代码:

    <WebBrowser LoadCompleted="wb_LoadCompleted"></WebBrowser>           
    
    void wb_LoadCompleted(object sender, NavigationEventArgs e)
    {
        string script = "document.body.style.overflow ='hidden'";
        WebBrowser wb = (WebBrowser)sender;
        wb.InvokeScript("execScript", new Object[] { script, "JavaScript" });
    }


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    2016年2月5日 8:35
    版主
  • 我的目的不是让滚动条显示或隐藏,隐藏了它也能滚动啊。

    我现在已经找到一种方法了,但要求 WebBrowser 的滚动条暂时失效,等到外层的滚动条滚动到底部时在让其生效。

    所以,请问有什么办法能让控件内部的滚动条失效的方法吗?

    ********更新补充********

    这样貌似也不行。。。

    可能我没说明白,看具体的截图:

    可以看到,当我向下滚动屏幕时,只有 WebBrowser 是滚动的,上面的图片始终在顶部挡住视线,如果上面的图片和 WebBrowser 是融为一体的,整个屏幕滚动就是我想要的效果。

    我现在想到的方案是,把已有的 HTML 内容顶部添加一个空白(透明)区域(刚好和顶部图片高度一样),并且让WebBrowser 占整个屏幕,然后当 WebBrowser 发生向下滚动时,让图片消失。


    *******更新补充*********

    原来我的 HTML 代码本身就留有空白块。。。


    2016年2月5日 9:47
  • 在吗?非常感谢你的回答,我发现你的这个回答还是对我有用的,我现在通过你的方法隐藏 WebBrowser 的滚动条,然后为了达到我的效果,我必须让 WebBrowser 控件的高度和其内容高度一样(让 WB 超出屏幕,这样,外部包裹的滚动条才能生效),现在要解决的就是获取它的实际高度。你知道如何获取它的高度吗?

    *******更新补充*********

    找到方法(●'◡'●):

            private async void WebView_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
            {
                // 动态加载css
                var js = @"var myCss = document.createElement(""link"");
                         myCss.rel = ""stylesheet"";
                         myCss.type = ""text/css"";
                         myCss.href = ""ms-appx-web:///default.css"";
                         document.body.appendChild(myCss);
                         document.body.style.overflow = 'hidden';
                         window.external.notify(JSON.stringify(document.body.scrollHeight));";
                await sender.InvokeScriptAsync("eval", new[] { js });         
            }
    
            private void WebView_ScriptNotify(object sender, NotifyEventArgs e)
            {
                var wv = (WebView)sender;
                wv.Height = Convert.ToDouble(e.Value);
            }



    2016年2月5日 12:30