CODEWITHSUNDEEP
htmlcssscrollwindows-store-appswinjs
roryok
roryok

Reputation: 9645

WinJS: Scroll issues when soft-keyboard is displayed

I have a windows store app with a column of scrollable text in the center. On the top and bottom I want to have fixed widgets which do not move when scrolling.

I've gotten this to work just fine using some quite simple html

However, when the soft keyboard / touch keyboard is displayed, the bottom of the window is hidden (I would have expected it to resize) and the content is out of view until scrolled to the end. I can see how this probably works quite well for some apps, but for mine it's a disaster. bottom widgets are occluded by the keyboard and top ones scroll out of view when I scroll the center text column to the end.

Here's an imgur gallery of screenshots that show what I mean. I gave up trying to screencapture this after two hours.

Here's the source of my demo app https://dl.dropboxusercontent.com/u/568631/ninjaScroll2.zip

I can detect when the keyboard is shown or hidden, but I can't seem to do anything about it. I can't resize the window (window.height cannot be set). 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.

Does anyone have a workaround for this issue? Is there some way to control the actual window height, or stop this weird viewport scroll effect?

Upvotes: 0

Views: 108

Answers (1)

Elvis Xia - MSFT
Elvis Xia - MSFT

Reputation: 10831

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

I couldn't reproduce this scenario. By my side when scrolling to 100%, the touch-keyboard also cover the bottom of the window, and the window didn't start to scroll itself. I'm targeting 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.

You are targeting the right direction. When the touch-keyboard is on, the window scroller is shown, so that you can scroll to the see the bottom when the touch-keyboard is on. Thus when you scroll the content to the bottom and continuing scrolling, the window will be 'pulled' to up.

So, the workaround is to adjust the position of the bottom divs in 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>

Notes: To simplify the problem, I use a div to wrap the fixed content. And adjust the position by changing the height of the div.

And here is the link to complete demo: ninjaScroll2.

Upvotes: 1

Related Questions