如何使用CSS和JavaScript製作滾動的Div行？

我想創建一個網頁與形式（代表項目列表，用戶可以形容。如何使用CSS和JavaScript製作滾動的Div行？

我有我的大部分功能的工作，但我想dymicly添加的形式展現出來動態數（在需要的情況下使用滾動條）我在火狐瀏覽器中工作正常，但在IE9中（在標準模式下）一旦內容強制滾動條顯示下面的動態表單就會被推送（如果我設置overflow-x：scroll而不是「auto」，我不明白這一點）當滾動條初始化後，視覺轉換就可以了，但在此之後，我不希望進一步轉換。

剝離示例：

<!DOCTYPE html> 
<html> 
<head> 
<script> 
    var next_id = 1; 

    function maximize_width(element) { 
     var w = 0; 
     var c = element.firstChild; 

     while (c) { 
      if (!isNaN(c.offsetWidth)) { 
       w += c.offsetWidth; 
      } 
      c = c.nextSibling; 
     } 
     element.style.width = w + "px"; 
    } 

    function do_add() { 
     var container = document.getElementById("container"); 
     var t = document.getElementById("template").cloneNode(true); //clone the template 
     t.id = "item_" + next_id; //create a new unique id 
     t.className = "item"; 
     next_id += 1; 
     container.appendChild(t); 
     maximize_width(container); 
    } 

</script> 
<style> 

#template{ 
    display:none; 
} 

#scroll-container { 
    width: 100%; 
    margin: 0px; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 

#container{ 
} 

.item{ 
    display:inline-block; 
    margin: 0px; 
    width: 200px; 
    height: 200px; 
    background-color: green; 
} 

</style> 
</head> 
    <body> 
     <div id="scroll-container"> 
     <div id="container"> 
      <form id="template" class="template"> 
      </form> 
     </div> 
     </div> 
    <button onclick="do_add()">Add</button> 
    </body> 
</html>

來源

2012-04-20 tletnes

這個添加到您的標題不夠嗎？

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

（我沒有我的IE瀏覽器的Linux工作站上，但它通常是足以讓IE9按預期方式工作doctype是否已經正確）

來源

2012-04-23 16:32:58

謝謝，我知道<！DOCTYPE HTML>到請求嚴格的模式，但不知道IE的引擎選擇問題。 – tletnes 2012-04-23 19:58:56

我不知道爲什麼我們大多數人不知道這一點。 MS應該更清楚地表明，他們的引擎現在可以與其他的doctype和這個選項進行比較。在找到它之前，我失去了很多時間，我並不孤單。現在我甚至很少測試IE9，因爲我在Chrome上所做的大部分工作都可以工作（並且我不關心IE8--）... – 2012-04-24 05:59:57

如何使用CSS和JavaScript製作滾動的Div行？

回答

相關問題