переполнение: скрыто, но разрешить автопрокрутку содержимого

Question

У меня есть div, где содержимое периодически добавляется к нему с помощью запроса append().Когда контент становится длиннее, он в конечном итоге переполняет div.Я не хочу, чтобы при переполнении появлялись полосы прокрутки, но при этом содержимое прокручивается вверх, чтобы показать новое содержимое ниже.

Возможно ли это?Когда я использую overflow-x: hidden, полоса прокрутки не появляется, но содержимое скрыто.

Answer 1

Если размер контейнера фиксирован, вы можете поместить содержимое в абсолютно позиционированную оболочку, например:

<div class="container">
    <div class="wrap">
        <p>bah</p>
    </div>
</div>

и css:

.container {
    y-overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}

.wrap {position:absolute; bottom: 0; left:0;right:0;
}

http://jsfiddle.net/sXGd9/

Answer 2

Если у вас есть каждый добавленный контент в вашем "#container" div, обернутом в отдельный div ".append", вы можете сделать что-то вроде:

var pos = $('#container div:last').position();
$('#container').scrollTop(pos.top);

Это полезно?

Другие решения можно найти в предыдущем посте: Как прокрутить строку таблицы в представление (element.scrollintoView) с помощью jQuery?

Answer 3

append() добавится к контенту в конце. Возможно, вы захотите prepend() нового контента, поэтому данные будут добавлены раньше старого контента.

Что касается overflow, вы можете установить его на scroll, чтобы при необходимости отображались полосы прокрутки, или hidden, чтобы полосы не появлялись, но содержимое не было видно. В противном случае вы можете установить его на visible, чтобы он был виден, но полосы прокрутки не будут отображаться.

Хотите, чтобы переполненный контент был виден? Если это так, установите overflow: visible, в противном случае установите overflow: hidden (потому что вам не нужны полосы прокрутки). Во всяком случае, с этим вы не сможете прокрутить содержимое. Если вам нужна прокрутка, вам нужно создать собственную систему прокрутки, добавив обработчик событий в ваш контейнер.