Как сохранить div, прокручивающийся снизу, когда HTML-текст добавляется к нему через jquery, но скрывает полосу прокрутки?

Ниже у меня есть небольшой симулятор js для разных командных инструментов. Пользователь вводит команду, и если она исправлена, она отображает ее вверху. Для будущих целей мне нужно убедиться, что он может обрабатывать столько команд, сколько необходимо, прежде чем завершать симуляцию. Это неизбежно приведет к переполнению контента.

Мое решение теперь устанавливало автоматическое переполнение Y, добавляло полосу прокрутки и немного jquery, чтобы клиент всегда прокручивался в нижней части выходного div, потому что содержимое добавляется ниже предыдущего содержимого каждый раз, когда пользователь вводит правильная команда.

Сейчас это работает отлично, за исключением того, что я хотел бы удалить полосу прокрутки. Я хотел бы, чтобы контент вел себя так же, как и при переполнении auto, и без него, кроме видимой полосы прокрутки.

enter image description here

Есть ли способ сделать это с помощью jquery или javascript?

Я знаю, что могу сделать некоторые трюки css, чтобы поместить какой-то черный цвет на полосу прокрутки с индексом z, но я хотел бы избежать этого, если это возможно.

Ответы

Ответ 1

Все, что вам нужно, это добавить overflow: hidden в вашем контейнере и прокручивать его после загрузки содержимого:

div.scrollTop = div.scrollHeight;

Демо- версия http://jsfiddle.net/nT75k/2/

Ответ 2

Да, вы можете добавить прослушиватель событий, и когда это событие будет выпущено, вы можете прокручивать его вниз, проверяя высоту так же

$container = $('.container');
$container[0].scrollTop = $container[0].scrollHeight;

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $container = $('.container');
    $container.append('<p class="row">' + e.target.value + '</p>');
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
  }
});

http://jsfiddle.net/w2qbe/

Ответ 3

Продолжайте использовать javascript для прокрутки и поместите div, содержащий ваш симулятор, в другой div, который немного меньше, и переполнения скрыты на внешнем div. Я использовал эту технику пару раз, и это довольно весело.

Единственное, о чем вы должны быть осторожны, это то, что полосы прокрутки имеют несколько разную ширину в разных браузерах, поэтому будьте осторожны.

например:

HTML:

<div id="outside">
    <div id="inside">
        <div>more content 1</div>
        <div>more content 2</div>
        <div>more content 3</div>
        <div>more content 4</div>
        <div>more content 5</div>
        <div>more content 6</div>
        <div>more content 7</div>
        <div>more content 8</div>
        <div>more content 9</div>
        <div>more content 8</div>
        <div>more content 7</div>
        <div>more content 6</div>
        <div>more content 5</div>
        <div>more content 4</div>
        <div>more content 3</div>
        <div>more content 2</div>
        <div>more content 1</div>
    </div>
</div>

CSS:

div#outside {
    width: 120px;
    height: 100px;
    overflow: hidden;
}

div#inside {
    width: 135px;
    height: 100px;
    overflow-y: auto;
}

Посмотрите эту скрипку → http://jsfiddle.net/5bkz5/1/ <- и прокрутите вниз текст!

Ответ 4

div.scrollTop = div.scrollHeight;

но вам не нужно overflow: hidden.