Как добавить полосу прокрутки только от дел до другой DIV

Question

Позвольте мне сначала представить мой пример кода:

<div id="StartScroll"></div> 
    Many divs and content here ! 
<div id="EndScroll"></div> 

Мой вопрос заключается в том, что как я могу сделать полосу прокрутки, которое начинает прокручиваться DIV с идентификатором StartScroll и завершение прокрутки в div с идентификатором EndScroll.

Обратите внимание, что есть содержание, прежде чем StartScroll и после EndScroll, но я хочу, чтобы полоса прокрутки не следует допускать, чтобы выйти за пределы StartScroll и EndScroll.

Как я могу это сделать? Может быть, с jQuery?

Заранее благодарен!

Answer 1

переполнение-у: свиток может быть решением

http://jsfiddle.net/ds3nqbkz/2/

<div id="StartScroll" style="overflow-y: scroll"> 
Many divs and content here !<br /> 
Many divs and content here !<br /> 
Many divs and content here !<br /> 
</div> 

Answer 2

Wrap содержание в пределах разделения блоков startScroll и endScroll в div и назначить следующий стиль:

overflow-y: auto; 
height: 200px; (or any specific height you wish to) 

Answer 3

Попробуйте следующее:

Check here

.makescroll { 
height:150px 
overflow-y:scroll; 

} 

<div class="makescroll"> 
<div id="StartScroll"></div> 
<div id="EndScroll"></div> 
</div> 

Answer 4

Вы затем обернуть содержание одного DIV и дать ему фиксированную высоту и сделать переполнение-у: авто или свиток.

overflow-auto: - Будет показывать прокрутку только в том случае, если ваш контент больше высоты. Иначе он будет удален. overflow-scroll: - всегда будет показывать прокрутку, в случае, если содержимое меньше, будет показано отключенное прокрутка.

Вы можете использовать любой подход ниже, чтобы применить его. Примеры имеют прокрутку, при необходимости вы можете перейти на авто.

#fixed{ 
height:150px; 
overflow-y:scroll; 
} 

<div id="StartScroll"></div> 
<div id="fixed"> 
// other content ere 
</div> 
<div id="EndScroll"></div> 
</div> 

#

<div id="StartScroll" inlineStyle="height:150px;overflow-y:scroll;"></div> 
<div id="fixed"> 
// other content ere 
</div> 
<div id="EndScroll"></div> 
</div> 

##################################### ################################################## #######

fixedStyle{ 
height:150px; 
overflow-y:scroll; 
} 

<div id="StartScroll" class="fixedStyle"></div> 
<div id="fixed"> 
// other content ere 
</div> 
<div id="EndScroll"></div> 
</div> 
    ################################################################################## 
    documentById("fixed").style = "height:150px;overflow-y:scroll;"; 

    <div id= "StartScroll"></div> 
    <div id="fixed"> 
    // other content ere 
    </div> 
    <div id="EndScroll"></div> 
    </div>