it-swarm.com.ru

Перемещайте div переполнения вниз, если пользователь не прокручивает вверх

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

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

130
Robert E. McIntosh

хорошо, пока это может помочь вам:

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

[РЕДАКТИРОВАТЬ], чтобы соответствовать комментарию ...

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;
});
87
Mr.Manhattan

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

Скажем, у нас есть следующий 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 - это scrollHeight элемента за вычетом высоты самого элемента. При использовании полосы прокрутки может быть трудно (это было в Chrome для меня), чтобы получить полосу прокрутки вплоть до самого дна. поэтому я добавил неточность в 1 пиксель. Таким образом, isScrolledToBottom будет истинным, даже если полоса прокрутки будет 1px снизу. Вы можете установить это так, как считаете нужным.

Тогда это просто вопрос установки scrollTop элемента внизу.

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

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

Правка: Добавлен фрагмент кода, чтобы уточнить, когда isScrolledToBottom является 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>

123
dotnetCarpenter

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

Хитрость заключается в использовании display: flex; и flex-direction: column-reverse;

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

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

96
Jim Hall
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

Демоверсия в реальном времени: http://jsfiddle.net/KGfG2/

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

Or animated:

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

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

3
Krishnadas PC
//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
KingOfDaNorth

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

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

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

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

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

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

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

1
Blauhirn
.cont{
height: 100px;
overflow-x: hidden;
overflow-y: auto;
transform: rotate(180deg);
direction:rtl;
text-align:left;
}
ul{
overflow: hidden;
transform: rotate(180deg);
}
<div class="cont"> 
 <ul>
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>  
 </ul>
</div>
  1. Run code snippet чтобы увидеть эффект. (PS: если Run code snippet не работает, попробуйте это: https://jsfiddle.net/Yeshen/xm2yLksu/3/ )

  2. Как это работает:

Переполнением по умолчанию является прокрутка сверху вниз.

transform: rotate(180deg) может сделать прокрутку или загрузить динамический блок снизу вверх.

  1. Оригинальная идея:

https://blog.csdn.net/yeshennet/article/details/88880252

0
yisheng wu