Держите overflow div прокрученным вниз, если пользователь не прокручивает вверх

У меня есть div, который составляет всего 300 пикселей, и я хочу, чтобы он, когда страница загружается, прокручивался в нижней части содержимого. Этот div имеет динамически добавляемый к нему контент и должен оставаться прокрученным до конца. Теперь, если пользователь решит прокрутить вверх, я не хочу, чтобы он возвращался вниз, пока пользователь не прокручивает весь путь вниз снова

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

119
css html javascript jquery scroll

8 ответов

ну хотя это может помочь вам:

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[EDIT], чтобы соответствовать комментарию...

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

всякий раз, когда содержимое добавляется, вызовите функцию updateScroll () или установите таймер:

//once a second
setInterval(updateScroll,1000);

если вы хотите обновить только если пользователь не двигался:

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});
79

Я только что реализовал это, и, возможно, вы можете использовать мой подход.

у нас есть следующий HTML-код:

<div id="out" style="overflow:auto"></div>

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

var out = document.getElementById("out");
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;

scrollHeight дает вам высоту элемента, включая любую не видимую область из-за переполнения. clientHeight дает вам высоту CSS или сказал по-другому, фактическую высоту элемента. Оба метода возвращают высоту без margin, так что вам не нужно беспокоиться об этом. scrollTop дает вам положение вертикальной прокрутки. 0-верх, а max-высота прокрутки элемента минус высота самого элемента. При использовании полосы прокрутки может быть трудно (это было в Chrome для меня), чтобы получить полосу прокрутки до самого дна. поэтому я бросил неточность 1px. Так что isScrolledToBottom будет true, даже если полоса прокрутки 1px снизу. Ты можешь сделать все, что считаешь правильным. вы.

тогда это просто вопрос установки прокрутки элемента в нижней части.

if(isScrolledToBottom)
    out.scrollTop = out.scrollHeight - out.clientHeight;

я сделал скрипку для вас, чтобы показать концепцию:http://jsfiddle.net/dotnetCarpenter/KpM5j/

изменить: Добавлен фрагмент кода для уточнения, когда isScrolledToBottom is true.

придерживайтесь полосы прокрутки вниз 

const out = document.getElementById("out")
let c = 0

setInterval(function() {
    // allow 1px inaccuracy by adding 1
    const isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1

    const newElement = document.createElement("div")

    newElement.textContent = format(c++, 'Bottom position:', out.scrollHeight - out.clientHeight,  'Scroll position:', out.scrollTop)

    out.appendChild(newElement)

    // scroll to bottom if isScrolledToBottom is true
    if (isScrolledToBottom) {
      out.scrollTop = out.scrollHeight - out.clientHeight
    }
}, 500)

function format () {
  return Array.prototype.slice.call(arguments).join(' ')
}
#out {
    height: 100px;
}
<div id="out" style="overflow:auto"></div>
<p>To be clear: We want the scrollbar to stick to the bottom if we have scrolled all the way down. If we scroll up, then we don't want the content to move.
</p>
111

я смог заставить это работать только с CSS.

фокус в том, чтобы использовать display: flex; и flex-direction: column-reverse;

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

вот рабочий пример. https://codepen.io/jimbol/pen/YVJzBg

78
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

Live demo:http://jsfiddle.net/KGfG2/

20
$('#div1').scrollTop($('#div1')[0].scrollHeight);

Or animated:

$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);
13
$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;

Это позволит рассчитать положение прокрутки с высоты #yourDivID С помощью $(document).height() свойство так, что даже если динамическое содержимое добавляется в div, скроллер всегда будет в нижней позиции. Надеюсь, это поможет. Но у него также есть небольшая ошибка, даже если мы прокручиваем вверх и оставляем указатель мыши из скроллера, он автоматически придет в нижнее положение. Если бы кто-нибудь мог это исправить, было бы здорово.

3
//Make sure message list is scrolled to the bottom
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;

container.scrollTop = contentHeight - containerHeight;

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

работает в IE и chrome..

2

ответ Джима Холла предпочтителен, потому что, хотя он действительно не прокручивается вниз, когда вы прокручиваете вверх, это также чистый CSS.

очень к сожалению, однако, это не стабильное решение: в chrome (возможно, из-за 1-px-проблемы, описанной dotnetCarpenter выше),scrollTop ведет себя неточно на 1 пиксель, даже без взаимодействия с Пользователем (при добавлении элемента). Вы можете установить scrollTop = scrollHeight - clientHeight, но это сохранит div в положении, когда будет добавлен другой элемент, он же функция "keep itself at bottom" больше не работает.

Итак, короче говоря, добавление небольшого количества Javascript (вздох) исправит это и выполнит все требования:

что-то вроде https://codepen.io/anon/pen/pdrLEZ это (пример по Coo), и после добавления элемента в список, также следующее:

container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
    container.scrollTop = container.scrollHeight - container.clientHeight;
}

где 29-высота одной линии.

Итак, когда пользователь прокручивает половину строки (если это вообще возможно?), этот Javascript проигнорирует его и прокрутит вниз. Но, думаю, этим пренебрегают. И, он исправляет Chrome 1 px thingy.

0