Прокрутка вниз не работает

Question

Прокрутка вниз не работает

0

Нужна помощь, почему мой scrolltop не работает над этим образцом. Я не знаю, почему... с использованием кода все работает нормально. Но обновление css scrolltop не работает. :( Что я должен сделать, чтобы исправить это? Проблема связана с моим стилем CSS? Я использовал это, но он не будет прокручиваться в нижней части div.

$(document).ready(function() {
    alert('scroll must happen');
    $('#message_container').scrollTop($('#message_container')[0].scrollHeight);
    $('.topbox').html('just sample');
});

Cindy93 20 окт. 2013, в 00:26

Источник

Теги:

javascript

jquery

2 ответа

0

Вы должны установить 2 вещи:

Переполнение для div,
Некоторая высота, даже процентная доля (чтобы сделать ее более гибкой).

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

Я добавил свойство высоты и переполнения к вашему CSS, и теперь он работает так, как ожидалось.

jsFiddle

Добавлен CSS:

#message_container {
 overflow-y:auto;
 overflow-x:hidden;
 height:300px;
}

Shlomi Hassid 19 окт. 2013, в 21:34

Ещё вопросы

Paul S. · Accepted Answer · 2013-10-19T20-00-00.000Z

Нет видимой прокрутки, потому что элемент, который вы прокручиваете, не переполнен; все это отображается. Полоса прокрутки предназначена для элемента <body> а не <div> который вы пытаетесь прокрутить.

Вы можете заставить его работать, если вы даете #message_container высоту, например

#message_container {height:100px;}

Альтернативно, используйте абсолютные трюки позиционирования, например, в этой демонстрации. (Исходный "отменяет" CSS, я использовал его для сокращения кода. См. MDN)

#container, #head, #body, #foot{
    position: absolute;
    top:0;left:0;right:0;bottom:0;
}
#head {
    bottom: initial;
    height:50px;
}
/* position so it get your desired size*/
#body {
    top:50px;
    bottom:50px;
    overflow-y: scroll;
}
#foot {
    top: initial;
    height:50px;
}

я обновил ссылку. Я добавил текст, чтобы показать переполнение, но все еще не работает.
почему это была полоса прокрутки тегов тела, когда переполнение было установлено на #message_container?
@ Cindy93 Это <body> переполнено, а не <div id="message_container"> . overflow-y явно указывает, что должно произойти, когда элемент переполняется по оси y , но не сообщает элементу, когда переполниться . Время переполнения контролируется ограничениями высоты / ширины, такими как сами высоты / ширины , или другим положением, препятствующим росту элемента; такие примеры включают абсолютное позиционирование с верхним и нижним значениями.
ну, спасибо .. но я могу дать высоту 100px на #message_container .. я хочу, чтобы высота была гибкой. но каждое появившееся сообщение должно фокусироваться на нижней части элемента div ..
@ Cindy93 смотрите редактировать, надеюсь, это поможет :)
спасибо большое :) намного лучше сейчас ...
хммм .. Пол .. просто хочу спросить .. потому что голова запуталась на iphone .. у меня есть текстовый ввод в нижнем колонтитуле .. как только вы наберете и нажмете кнопку отправить, голова перейдет в центр страницы ..
Похоже, что-то еще должно происходить для пересчета абсолютного позиционирования с различными значениями