jQuery - прокрутка div з переповненням-y: прокручування; - jquery, css3, юзабіліті

У мене є div, який містить список повідомлень (це програма для чату). Оскільки кожне повідомлення додається в нижній частині списку, я думай Я хочу, щоб дів прокрутився внизу сторінки. Це має сенс, правда? Отже - питання №1: як змусити діву прокрутити донизу?

Тепер наступне питання - трохи про зручність використання. Що робити, якщо користувач прокручує вгору, щоб прочитати щось, що раніше було розміщено? Тоді раптом хтось публікує нове повідомлення? Це означає, що jQuery знову прокрутить униз. Це може дуже дратувати користувача. Який хороший спосіб впоратися з цим? Чи повинен він прокручуватися лише вниз, якщо смуга прокрутки прокручується до кінця вже до того, як буде додано нове повідомлення? Якщо так, як це зробити в jQuery? Або є більш корисне рішення?

Відповіді:

ви можете отримати позицію прокрутки за допомогою window.pageYOffset а потім використовувати window.scrollTo(0, y) для прокрутки до якогось місця.

або ви навіть можете використовувати $("#mydiv").scrollTop(newmsg_top) в jquery, щоб прокрутити вниз до нового повідомлення.

де var newmsg_top = parseInt($("#mydiv li:last").offset().top);

тут #mydiv це діва з усіма вашими повідомленнями.
так #mydiv li:last вказує на останнє повідомлення.
offset() повертає поточне положення елемента стосовно документа, і ви можете отримати верхню позицію за .top

Якщо ви хочете відносної позиції стосовно батьків, замість цього ви можете піти position()

EDIT: Тут я працюю jsfiddle тут. Будь ласка, подивіться.</ strong> Примітка. Ви спускаєтесь лише в тому випадку, якщо переглядаєте останній елемент. (Для вирішення проблеми з юзабіліті)

$("#mydiv").append("My data");
var newmsg_top = parseInt($("#mydiv")[0].scrollHeight );
$("#mydiv").scrollTop(newmsg_top);