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

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    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
    |

答案

  • Question
    登录进行投票
    0
    登录进行投票

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

    过去一直没注意到 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
    |