Прокрутка контента, который имеет абсолютную позицию - PullRequest
Новая
       7

Прокрутка контента, который имеет абсолютную позицию

2 голосов
/ 19 февраля 2012

У меня есть div (.outer - область просмотра) с фиксированной высотой, который содержит другой div (.inner - содержимое), который следует прокручивать. Div .inner позиционируется абсолютно с bottom: 0, так что мы всегда можем видеть, что находится в нижней части этого div.

Проблема в том, что при добавлении этого bottom: 0 к .inner полоса прокрутки .outer становится серой и неактивной. Если мы удалим bottom: 0, полоса прокрутки сработает, но мы увидим верх, а не низ .inner.

Это HTML: 

<div class="outer">
    <div class="inner">
        this content should be scolled to the bottom possibly with bottom: 0; AND we should still have to scrollbar the scroll to the top<br/>
        1<br/>
        2<br/>
        3<br/>
        4<br/>
        5<br/>
        6<br/>
        7<br/>
        8<br/>
        9<br/>
        10<br/>
        11<br/>
        12<br/>
        13<br/>
        14<br/>
        15<br/>
        16<br/>
        17<br/>
        18<br/>
        19<br/>
        20<br/>
        bottom (the scrollbar must be active)
    </div>
</div>​

CSS: 

.outer {
    height: 200px; 
    position: relative;
    overflow-y: scroll;
    width:270px;
}
.inner {
    position: absolute;
    bottom: 0px;
    background-color:#aaa;
    width:250px;
}

http://jsfiddle.net/SAyhn/8/

Использование jQuery для отображения нижней части .inner в окне просмотра .outer также допустимо.

Ответы [ 2 ]

0 голосов
/ 19 февраля 2012

На самом деле я пошел немного дальше с вашим предложением, и я оставил position: absolute и bottom: 0 для .inner div (чтобы иметь это содержимое внизу (при загрузке страницы) в случае, если .inner имеет меньше высоты, что .outer) и я добавил это: 

if($('.outer').outerHeight() < $('.inner').outerHeight()) {
    $('.inner').css("bottom", "auto");
    $('.outer').scrollTop($('.inner').outerHeight());
}

Таким образом, у меня есть .inner, показанный внизу (если он имеет высоту меньше, чем .outer) по умолчанию, и я выполняю код выше каждый раз, когда я помещаю дополнительный контент в .inner div, чтобы сделать фактический прокрутите, если это необходимо.

Большое спасибо еще раз. :)

0 голосов
/ 19 февраля 2012

Внешний div в действительности не прокручивается вниз в вашем примере.Что происходит там, так это то, что внутренний div расположен относительно внешнего div.Так как это bottom:0, это означает, что он заполняет весь div, а остальные переполняются над элементом, поэтому прокручивать нечего.(Вы можете попробовать установить его на bottom:-10px, что дает 10 пикселей места для прокрутки.)

Вы не можете установить позицию прокрутки только с помощью CSS, вам нужно немного JavaScript: 

var outer = document.getElementsByClassName( 'outer' );
outer[0].scrollTo( 0, 10000 );​​​

Или с помощью jQuery: 

$( '.outer' ).scrollTop( 10000 );
...