Как сделать прокручивающийся ряд Divs с помощью CSS и Javascript?

Я пытаюсь создать веб-страницу с динамическим числом форм (для представления списка элементов, которые пользователь может описать.Как сделать прокручивающийся ряд Divs с помощью CSS и Javascript?

У меня большая часть моей функциональности работает, но мне бы хотелось, в строке (со строкой прокрутки, если необходимо), у меня это в основном работает. В Firefox он работает так, как ожидалось, но в IE9 (в стандартном режиме), когда контент заставляет полосу прокрутки отображаться ниже, династические формы подталкиваются (если я устанавливаю переполнение-x: прокрутка, а не «авто», я не получаю этого). Я в порядке с визуальным сдвигом, когда полоса прокрутки начинается с начала, но после этого я не ожидал дальнейших сдвигов.

урезанный пример:

<!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 Workstation, но это, как правило, достаточно, чтобы сделать работу IE9, как ожидается, если доктайп уже правильно)

источник

2012-04-23 16:32:58

Спасибо, я знал о по запросу строгий режим, но не знал о проблемах с движком IE. – tletnes

Я не знаю, почему большинство из нас не знает об этом. MS должна сделать более понятным, что их двигатель теперь сопоставим с другими с doctype и этим вариантом. Я потерял много времени, прежде чем нашел его, и я не один. Теперь я редко даже тестирую IE9, поскольку большинство из того, что я делаю в Chrome, будет работать (и мне не важно IE8) ... –

Как сделать прокручивающийся ряд Divs с помощью CSS и Javascript?

ответ

Смежные вопросы