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

Question

我是开发Windows 8商店应用程序的新手，我正在创建我的第一个应用程序。

我正在制作的应用是一款笔记应用。我昨天才启动应用程序，所以它仍然是非常基本的，但我在滚动时遇到问题。这是显示问题的屏幕截图：

如您所见，当输入一定数量的音符时，它们会开始重叠屏幕。我需要做的是，当它从显示器侧面注释一定数量的像素时，它使它可以滚动。

包含音符的div是在写入音符时创建的。注释还会根据输入的文本量自动更改大小。

是否有人知道如何制作它以便它们向左和向右滚动而不是重叠？

编辑： 这是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;





}

我还没有真正困扰UI和设计，因为我想获得所有背景资料，如javascript，jquery和azure首先工作。

我只是做这个应用程序作为练习项目，我在两个月内进行的70-481和70-482考试，所以它永远不会在商店或任何东西。 谢谢你的帮助

干杯 科里

Answer 1

我强烈建议您使用WinJS.UI.ListView控件而不是自己编写div元素。

这样你不仅可以看到＆amp;感觉您的应用程序与用户对Windows 8 Modern UI应用程序的期望保持一致，但它也将为您处理DOM元素的滚动和管理。

有关如何创建和设置ListView控件的样式，请参阅this tutorial。

Answer 2

我同意@ma_il，但是如果你确实想要为自定义元素添加滚动功能，你可以简单地将这些元素包装在div中并为该div添加一些CSS属性......

overflow-x：auto; / *水平滚动 / overflow-y：auto; / 垂直滚动 / 溢出：自动; / 向两个方向滚动* /

如果该div的内容比屏幕更宽（或更高或两者），那么您的屏幕将自动变为滚动并且支持触摸。