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：顯示軟鍵盤時出現滾動問題

回答

相關問題