Последний DIV только прокручиваемый

Question

У меня есть следующий сценарий, где мне нужно прокручивать DIV. Что происходит со мной, когда я пытаюсь использовать разные решения, чтобы прокрутить весь набор DIV, становится прокручиваемым. Все, что я хочу сделать, это сделать только последний прокручиваемый DIV.

<div class="container">first</div> 
<div class="container">second</div> 
<div class="container"> 
    <div id="notSoLong">Don't scroll this!!!!</div> 
    <div id="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut placerat ipsum. Integer mollis magna sapien, nec fermentum justo volutpat dapibus. In eget pretium enim. Scroll this!!!</div> 
</div> 

.container { 
    width:100%; 
    height:auto; 
    min-height:100px; 
} 

#long { 
    width:200%; 
    overflow-x:auto; 
} 

Answer 1

Вы должны добавить overflow:auto; в .container. С другой стороны, если вы хотите только.long для прокрутки, вы должны обернуть его с другим элементом и установить, что в overflow:auto

Answer 2

Чтобы сделать прокрутку div, вы должны исправить высоту. , тогда свойство переполнения будет работать. И для последнего div для прокрутки вы можете использовать селектор «: last» с именем класса в css

Answer 3

Вы можете сделать это с помощью CSS Selector.

Для примера:

.container:last-child { 
    overflow-x:scroll; /* You can use 'auto' too, for showing Scrollbars when needed. 
} 

Другой способ сделать это является JQuery/JavaScript.

Например:

$(function(){ 
    $("#long").attr(style="overflow-x:scroll;"); 
}); 

Check jsFiddle