我有一个 Windows 应用商店应用程序,中间有一列可滚动的文本。在顶部和底部,我希望有固定的小部件,它们在滚动时不会移动。
我已经使用一些非常简单的 html 让它工作得很好
但是,当显示软键盘/触摸键盘时,窗口底部会隐藏(我希望它会调整大小)并且内容在滚动到末尾之前不可见。我可以看出这对某些应用程序来说可能效果很好,但对我来说这是一场灾难。当我将中心文本列滚动到末尾时,底部小部件被键盘遮挡,顶部小部件滚动出 View 。
这是一个 imgur gallery显示我的意思的屏幕截图。两个小时后,我放弃了尝试截屏。
这是我的演示应用程序的源代码 https://dl.dropboxusercontent.com/u/568631/ninjaScroll2.zip
我可以检测到键盘何时显示或隐藏,但我似乎无能为力。我无法调整窗口大小(无法设置 window.height)。我可以将我底部的小部件移动到键盘位置的正上方,但窗口在到达最低点时仍会滚动,然后顶部的小部件就消失了。
有人有解决此问题的方法吗?有什么方法可以控制实际的窗口高度,或者停止这种奇怪的视口(viewport)滚动效果吗?
最佳答案
Once the content window has scrolled to it's maximum of 100% (hidden beneath the keyboard) the window itself then starts to scroll up, hiding the top left / top center / top right divs
我无法重现这种情况。在我旁边,当滚动到 100% 时,触摸键盘也覆盖了窗口的底部,并且窗口没有开始滚动。我的目标是 SDK 14393。
I can move my bottom widgets to just above the keyboard position, but the window will still scroll when it reaches it's nadir, and then the top widgets are gone.
您的目标是正确的方向。当触摸键盘打开时,将显示窗口滚动条,以便您可以在触摸键盘打开时滚动到底部。因此,当您将内容滚动到底部并继续滚动时,窗口将被“拉”到上方。
因此,解决方法是调整 window.onscrolling
中底部 div 的位置:
默认.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";
}
默认.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 .
关于html - WinJS:显示软键盘时出现滚动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39185962/