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

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

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

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

包含注释的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考试，所以它永远不会出现在商店或其他任何地方。 谢谢你的帮助

干杯

---

Corey

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

这样，您不仅可以获得与用户期望的Windows8现代UI应用程序一致的应用程序外观，还可以为您处理DOM元素的滚动和管理

---

请参阅如何创建和设置ListView控件的样式。

我同意@ma_il，但如果您确实想向自定义元素添加滚动功能，只需将这些元素包装在一个div中，并向该div添加一些CSS属性

溢出-x:自动；/*水平滚动/ 溢出-y:自动；/垂直滚动/ 溢出：自动；/双向滚动*/

---

如果该div的内容比屏幕宽（或高，或两者都高），则您的屏幕将自动滚动并支持触摸。

Hi，我已尝试使用overflow-x:auto，但它仍然垂直滚动。这没有意义，我试着把它放在div和body标签中，但两者都不起作用。谢谢CoreyIt看起来你在相对或绝对地布局你的内容。是这样吗？您始终可以使用overflow-y:hidden禁用垂直滚动，但您将剪切内容。您可能想学习如何使用-ms grid或-ms flexbox。如果你愿意的话，你可以在虚拟办公时间和我在一起。我的工作时间发布在ohours.org/codefoster.Hi，不，我没有职位：绝对/相对。我在几个元素上使用了float:right或float:left。我会在上面发布完整的CSS。我会搜索你提到的ms flexbox和ms grid。我现在正在将所有代码复制到listview模板中，所以我将看看它是如何工作的。谢谢Corey BHi，是的，从我读到的你提供的链接来看，这看起来很完美，我将尝试使用listview，看看它是否解决了我的问题。谢谢，科里