WinJS: проблемы с прокруткой, когда отображается мягкая клавиатура

Question

У меня есть приложение для магазина Windows со столбцом прокручиваемого текста в центре. В верхней и нижней части я хочу иметь фиксированные виджеты, которые не перемещаются при прокрутке.

Я получил эту работу очень хорошо использовать некоторые довольно простой HTML

Однако при отображении программной клавиатуры/сенсорной клавиатуры, в нижней части окна скрыта (я бы ожидал, чтобы изменить размер) и содержимое не отображается до прокрутки до конца. Я вижу, как это, вероятно, хорошо работает для некоторых приложений, но для меня это катастрофа. нижние виджеты закрываются клавиатурой, а верхние - прокручиваются вне поля зрения, когда я прокручиваю столбцы центра текста до конца.

Вот скриншоты imgur gallery, которые показывают, что я имею в виду. Я сдался, пытаясь сделать это через два часа.

Вот источник моего демо-приложение https://dl.dropboxusercontent.com/u/568631/ninjaScroll2.zip

я могу определить, когда клавиатура отображается или скрыта, но я не могу ничего с этим поделать. Я не могу изменить размер окна (window.height не может быть установлен). I может переместить мои нижние виджеты чуть выше позиции клавиатуры, но окно все равно будет прокручиваться, когда оно достигнет его надира, а затем верхние виджеты исчезнут.

У кого-нибудь есть обходной путь для этой проблемы? Есть ли способ контролировать фактическую высоту окна или остановить этот странный эффект прокрутки видового экрана?

Answer 1

Когда окно содержание прокрутил это максимум 100% (скрытый под клавиатурой) окно, то сам начинает перемещаться вверх, пряча верхний левый/верхний центр/верхний правый дивы

Я не смог воспроизвести этот сценарий. При моей прокрутке до 100% сенсорная клавиатура также закрывает нижнюю часть окна, и окно не начинает прокручиваться. Я нацеливание SDK 14393.

Я могу пошевелить нижние виджеты чуть выше позиции клавиатуры, но окно все равно будет прокручивать, когда он достигает это надир, а затем верхние виджеты исчезли.

Вы направляетесь в правильном направлении. Когда сенсорная клавиатура включена, отображается окно скроллера, чтобы вы могли прокручивать до нижнего уровня, когда сенсорная клавиатура включена. Таким образом, когда вы прокручиваете контент донизу и продолжаете прокрутку, окно будет «вытягиваться» вверх.

Таким образом, обходной путь, чтобы отрегулировать положение нижних дивы в window.onscrolling:

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.