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

我有一个Windows应用商店应用程序，中间有一列可滚动文本。在顶部和底部，我希望有固定的小部件在滚动时不会移动。WinJS：显示软键盘时出现滚动问题

我已经得到了这个就好使用一些非常简单的HTML工作

然而，当显示软键盘/触控键盘，窗口的底部隐藏的（我本来期望它来调整）直到滚动到最后，内容不可见。我可以看到这对一些应用程序来说可能工作得很好，但对我来说这是一场灾难。当我将中间文本列滚动到末尾时，底部小部件被键盘遮挡，顶部小部件不能看到。

这里有一个截图显示我的意思的imgur gallery。我放弃了两个小时之后试图抓住这个。

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

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

有没有人有解决这个问题的方法？有没有办法控制实际的窗口高度，或停止这种奇怪的视口滚动效果？

来源

2016-08-27 roryok

一旦内容窗口已滚动到它的最大的100％（隐藏在键盘下方）的窗口，然后自己开始滚动起来，隐藏左上/顶部中心/右上方的div

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

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

您的目标是正确的方向。当触摸键盘打开时，会显示窗口滚动条，以便您可以在触摸键盘打开时滚动到底部。因此，当您将内容滚动到底部并继续滚动时，窗口将被“拉出”。

所以，解决方法是调整在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。

来源

2016-08-29 11:51:10

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

回答

相关问题