Question

我有一个Windows商店应用，中间有一列可滚动的文字。在顶部和底部我想要有固定的小部件，滚动时不会移动。

我使用一些非常简单的html

让这个工作得很好

然而，当显示软键盘/触摸键盘时，窗口的底部是隐藏的（我原本希望它调整大小）并且内容不在视图中，直到滚动到最后。我可以看到这对于某些应用程序可能非常有效，但对我来说这是一场灾难。键盘遮挡底部窗口小部件，当我将中心文本列滚动到末尾时，顶部窗口小部件滚动出视图。

这是一个显示我的意思的imgur gallery屏幕截图。两个小时后我放弃了试图屏蔽这个。

这是我的演示应用程序的来源 https://dl.dropboxusercontent.com/u/568631/ninjaScroll2.zip

我可以检测到键盘何时显示或隐藏，但我似乎无法对此做任何事情。我无法调整窗口大小（window.height无法设置）。我可以将我的底部小部件移动到键盘位置的正上方，但是当窗口到达最低点时窗口仍然会滚动，然后顶部窗口小部件就会消失。

是否有人针对此问题采取了解决方法？有没有办法控制实际窗口高度，或停止这种奇怪的视口滚动效果？

Answer 1

一旦内容窗口滚动到它的最大值100％（隐藏在键盘下方），窗口本身就会开始向上滚动，隐藏左上角/顶部中心/右上角的divs

我无法重现这种情况。当我滚动到100％时，触摸键盘也覆盖了窗口的底部，窗口也没有开始滚动。我定位SDK 14393。

我可以将我的底部小部件移动到键盘位置的上方，但是当窗口到达它的最低点时窗口仍会滚动，然后顶部的小部件就会消失。

您正在瞄准正确的方向。当触摸键盘打开时，会显示窗口滚动条，以便您可以在触摸键盘打开时滚动到底部。因此，当您将内容滚动到底部并继续滚动时，窗口将被拉出＆＃39;起来。

因此，解决方法是调整window.onscrolling中底部div的位置：

default.js：

var windowHeight = window.innerHeight;
var inputPane = Windows.UI.ViewManagement.InputPane.getForCurrentView();
...
window.onscroll = function (evt) {
    //change the position of bottom div
    var myDiv = document.getElementById("myDiv");
    myDiv.style.top = window.pageYOffset+"px";
}

inputPane.onshowing = function (eventArgs) {
    document.getElementById("myDiv").style.height = windowHeight-eventArgs.occludedRect.height+"px";
}

inputPane.onhiding = function (eventArgs) {
    document.getElementById("myDiv").style.height = windowHeight + "px";
}

default.html中：

<div id="myDiv" style="position:absolute;height:100%;width:100%;">
    <div style="position:absolute;top:2vh;left:2vw">top left</div>
    <div style="position:absolute;top:2vh;right:50vw">top center</div>
    <div style="position:absolute;right:2vw">top right</div>

    <div style="position:absolute;top:50vh;left:2vw">middle left</div>
    <div style="position:absolute;top:50vh;right:50vw">middle center</div>
    <div style="position:absolute;top:50vh;right:2vw">middle right</div>

    <div style="position:absolute;bottom:2vh;left:2vw">bottom left</div>
    <div style="position:absolute;bottom:2vh;right:50vw">bottom center</div>
    <div style="position:absolute;bottom:2vh;right:2vw">bottom right</div>
</div>

注意：为了简化问题，我使用div来包装固定内容。并通过改变div的高度来调整位置。

以下是完成演示的链接：ninjaScroll2。

WinJS：显示软键盘时的滚动问题

1 个答案: