如何使用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行？

回答

相关问题