如何使WinJS应用程序可滚动？

Question

I am new to developing Windows 8 store apps, and I am in the process of creating my first one.

The app I am making is a note taking app. I only started the app yesterday, so it's still very basic, but I am having a problem with the scrolling. Here is a screen shot displaying the problem:

As you can see, when a certain number of notes are entered, they start overlapping the screen. What I need to do is make it so that when the notes a certain amount of pixels from the side of the display, it makes it scroll-able.

The divs that the notes are contained in are created as the note is written. The notes also auto change size depending on the amount of text entered.

Does anyone know how I would make it so that they scroll to the left and right instead of overlapping?

EDIT: Here is the CSS:

body {

      overflow-x:auto;

}

#textInput {
    padding:20px;
    float:left;
    margin-top: 20px;
    margin-left: 20px;

    position:fixed;




}
#noteInput {
    display:block;
    border-width:5px;
    border-color:purple;
    box-shadow: 5px 5px 5px;


}

#titleInput {
    border-width:5px;
    border-color:purple;
    width:285px;
    box-shadow: 5px 5px 5px;


}

#noteSubmit {
    width:295px;
}

#headers {
    margin-left:100px;
    margin-top:80px;

}

#hr {
    margin-right: 40px;
    margin-left: 40px;
}

#noteContainer {
    float:left;
    margin-right:5px;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:400px;





}

I haven't really bothered with the UI and design much yet, as I want to get all the background stuff like javascript, jquery, and azure working first.

I am only doing this app as a project for practice, for the 70-481 and 70-482 exams I have in two months, so its never going to be in the store or anything. Thanks for your help

Cheers Corey

Answer 1

I strongly recommend using a WinJS.UI.ListView control instead of writing the div elements yourself.

That way you'll not only get a look & feel to your application that's consistent with what the user expects from a Windows 8 Modern UI app but it will also take care of the scrolling and management of the DOM elements for you.

See this tutorial on how to create and style a ListView control.

Answer 2

I agree with @ma_il, but if you do want to add scrolling functionality to custom elements, you simple wrap those elements in a div and add some CSS properties to that div...

overflow-x: auto; /* to scroll horizontally / overflow-y: auto; / to scroll vertically / overflow: auto; / to scroll in both directions */

If the contents of that div are wider (or taller or both) than the screen then your screen will automatically become scrolling and touch will be supported.