Как сделать div с вертикальной прокруткой?

Question

[misterkust]

Доброго времени суток.
Как сделать div с вертикальной прокруткой?
Пациент - ambidex.eu1.frbit.net
Хотелось бы сделать как-то так - ipic.su/img/img7/fs/kiss_29kb.1389791367.png

Answer 1

[Вадим Яковлев]

Как-то так.

<div class='div1'>
     <div class='div2'>
          many_text
     </div>
     <div class='div3'>Вниз</div>
</div>

.div1 {
     overflow:hidden;
     height:100px;
     position:relative;
}

.div2 {
     position:absolute;
     top:0;
}

.div3 {
     position:absolute;
     bottom:0;
     width:100%;
     text-align:center;
}

$(document).on('click','.div3',function(){
     $('.div2').animate({top:'-=100'},300);
});

Comments

[misterkust]

@FrimInc Большое спасибо, вроде разобрался. Подскажите, как сделать так, чтобы при каждом нажатии на стрелку опускалось на X пикселей, а при нажатии на другую поднималось на X пикселей?
И еще, при прокрутке элементы списка теперь перекрывают верхнюю стрелку - как этого избежать?

[Вадим Яковлев]

{top:'-=100'} вверх
{top:'+=100'} вниз

оберните блок с текстом в еще один блок

[al3ch5]

Вадим Яковлев Вадим Яковлев
Спасибо за скрипт, очень помог!

Answer 2

[Михаил Шатилов]

height: 245px;
overflow: auto;

На треугольник можно кинуть on click -> div scroll position + n (гуглите jquery scroll, к примеру).

Answer 3

[mrspd]

А можно

overflow-y: scroll;
overflow-x: hidden;

И использоваться вместо animate, scrollTop