У меня есть div, который содержит таблицу. Эта таблица динамически обновляется и заполняется данными, поскольку пользователь использует наш веб-сайт. Можно ли заставить этот div всегда прокручиваться вниз? Чтобы пользователь всегда мог видеть нижнюю часть таблицы, которая была добавлена. Спасибо!JQuery make div всегда прокрутите вниз
Это было бы что-то вроде
...onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').attr('scrollHeight')});
};
Обратите внимание, что если строки добавлены очень часто, вы бы хотели использовать setTimeout с проверкой переменных блокировки в начале, чтобы предотвратить прокрутку чаще, чем два раза в секунду или около того. Этот метод обсуждается, например. here
UPDATE
Начиная с JQuery 1.6, лучше использовать .prop() вместо .attr() (см комментарии к этому вопросу):
onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').prop('scrollHeight')});
};
Возможно, вам придется использовать .prop вместо .attr – cmcculloh
@cmcculloh, вы правы - начиная с jQuery 1.6, более целесообразно использовать .prop ('scrollHeight'), поскольку это не атрибут, т. Е. Не имеет места в атрибутах элемента HTML. –
этого руководство
http://jqueryfordesigners.com/fixed-floating-elements/
но использовать свойство bottom CSS, чтобы иметь самый нижний элемент, видимый на странице
element{ bottom:0; }
Я бы рекомендовал с помощью ScrollTo JQuery plugin. Просто используйте
element.scrollTo('max', {axis: 'y'});
или
element.scrollTo('max', duration, {axis: 'y'});
Этот плагин имеет дополнительные benifit иметь хорошую гладкую прокрутку.
Установите элемент обновления в качестве позиции абсолютного и снизу: 0
Попробуйте что-то вроде этого:
Создайте якорь, как <a id='bottomDiv'></a> и вставить JavaScript, как этот document.getElementById('bottomOfDiv').scrollIntoView(true);
Я привел здесь пример http://jsfiddle.net/PTmpL/1/
Я думаю, что это может быть простое решение !!!
element.scrollTo(element.get(0).scrollHeight);
Да, но с точки зрения UX, если вы хотите, чтобы пользователь сначала просмотрел последнюю строку. Почему бы вам не отсортировать стол неопознанным способом? – laymanje
Я бы добавил еще один момент к вопросу @laymanje. Если вы динамически обновляете через ajax, вы можете вставить новые строки в верхней части таблицы. – lucuma