如何讓winJS應用程序滾動？

我是新開發Windows 8商店應用程序，並且正在創建我的第一個應用程序。如何讓winJS應用程序滾動？

我正在做的應用程序是一個筆記應用程序。我只是在昨天才啓動應用程序，所以它仍然非常基本，但是我在滾動時遇到問題。這裏是一個截屏顯示問題：

enter image description here

正如你可以看到，當輸入的音符一定數量時，他們開始重疊畫面。我需要做的就是讓筆記從顯示器的側面看到一定數量的像素時，便可以進行滾動顯示。

筆記被包含在內的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和蔚藍的工作第一。

我只是在做這個應用程序作爲實踐項目，爲70-481和70-482的考試我有兩個月了，所以它永遠不會在店裏或任何東西。感謝您的幫助

乾杯科瑞

來源

2013-04-03 Fishingfon

我強烈建議使用WinJS.UI.ListView控制，而不是自己編寫的div元素。

這樣，你不僅可以得到一看&的感覺，你的應用程序是什麼用戶從Windows 8的現代UI應用程序預計一致，但它也將照顧到DOM元素的滾動和管理，爲您。關於如何創建和設置ListView控件，請參閱this tutorial。

來源

2013-04-03 14:39:35

你好，是的，這似乎是完美的，從我讀ü給的鏈接，我會嘗試使用列表視圖，並看看能否解決我的問題。謝謝你，科裏 – Fishingfon

我同意@ma_il，但如果你想滾動功能添加到自定義元素，你簡單的包裹在一個div，並添加一些CSS屬性，該div這些元素...

溢出-X：汽車;/*水平滾動/ overflow-y：auto;/垂直滾動/ 溢出：自動;/在這兩個方向上滾動*/

如果div的內容比屏幕，然後你的屏幕會自動變成滾動和觸摸將支持更廣泛的（或更高或兩者）。

來源

2013-04-03 15:07:43

嗨，我已經嘗試使用溢出x：自動，但它仍然垂直滾動。這沒有任何意義，我已經嘗試把它放在div和body標籤中，但都不起作用。感謝Corey – Fishingfon

看起來你正在相對或絕對地佈置你的內容。是對的嗎？您始終可以使用overflow-y：hidden禁用垂直滾動，但是您將裁剪內容。您可能想了解如何使用-ms-grid或-ms-flexbox。如果您願意，您可以隨我一起開始虛擬辦公時間。我的時間在ohours.org/codefoster上發佈。 –

嗨，不，我沒有位置：絕對/相對。我使用了float：right或float：在幾個元素上留下。我將發佈上面的完整CSS。我將搜索你提到的ms-flexbox和ms-grid。我現在將所有的代碼複製到一個listview模板，所以我會看看它是如何工作的。感謝Corey B – Fishingfon

如何讓winJS應用程序滾動？

回答

相關問題