none
使用 WinJS 开发 UWP 应用时,整个界面在触控键盘弹出后可滑动的问题 RRS feed

  • 问题

  • Hi 大家好。

    我在使用 WinJS 开发 UWP 应用,先看看下面的 gif 吧。gif 有两部分,第一部分是 winjs 应用,第二部分是 XAML 应用

    winjs应用,如果界面中有一个文本框(<input type="text" />),当光标进入,键盘弹出后会导致整个界面可以滚动。看起来是整个 <html> 都可以滚动的。而 XAML 创建的 UWP 则是没有问题的。

    我尝试在body上监听scroll事件,如果滚动时文本框是focus的,就将 body 的 scrollTop 设为 0。这样仍不完美,而且无法避免界面在顶部时,仍然能下滑的反馈效果。

    这个问题过去我也问过:https://social.msdn.microsoft.com/Forums/windowsapps/zh-CN/0232ba1a-9d3b-45fc-9bbb-048a0d3ab2c7/winjstext-inputbody?forum=windowsphonezhchs 不过到现在似乎在默认情况下,仍然会存在问题。

    想请教一下着如何能避免?谢谢

    2016年2月21日 14:37

答案

  • 好吧,自问自答一下,困扰我好久的问题昨晚有了突破性的进展。

    过去一直没注意到 AppBar 这个控件其实是可以随键盘弹出而跑到键盘上面去的,不会被键盘盖住,由此来分析,发现 .win-appbar 里的 position 是一个生疏的面孔

        position: -ms-device-fixed;

    后来在 MSDN 了解到这个值,可以使元素根据可视区域定位,并且不受缩放和移动影响。多么逆天的属性啊,于是我通过 css 给 body 也加上了这个属性。

    好消息是,键盘弹出后,页面真的不会上下滚动了!坏消息是,右侧的滚动条仍然存在

    另一个好消息是,前几天正好了解到 -ms-overflow-style 这个 css 属性(以前尝试过 overflow 设为 hidden,但是没用)!为 body 继续添加

        -ms-overflow-style: none;

    如此一来,达到了我需要的效果

    不过这样一来还有一个问题,自定义的限制了高度的容器例如一个 height 为 100px 的 div,内部的元素如果超过了 100px,是不会出现滚动条的,需要设置 -ms-overflow-style 为 auto。不过这一问题在 WinJS 控件上并不存在(例如 WinJS.UI.ListView)

    说了这么多,我其实并不知道这样做是否正确,是不是存在滥用的问题,还希望大家讨论一下,或者提供一下其他的解决方案或思路

    2016年2月22日 16:40