3

メッセージのリストを含むdivがあります（これはチャットルームアプリケーションです）。各メッセージがリストの一番下に追加されるので、divをページの一番下までスクロールしたいと思います。それは理にかなっていますよね？だから-質問＃1：divを一番下までスクロールさせるにはどうすればよいですか？

さて、次の質問は使いやすさについて少しです。ユーザーが上にスクロールして以前に投稿されたものを読んだ場合はどうなりますか？それから突然誰かが新しいメッセージを投稿しますか？これは、jQueryが再び下にスクロールすることを意味します。これは、ユーザーを非常に苛立たせる可能性があります。これを処理するための良い方法は何ですか？新しいメッセージが追加される前にスクロールバーがすでに完全に下にスクロールされている場合にのみ、下にスクロールする必要がありますか？もしそうなら、jQueryでそれを行う方法は？または、もっと使いやすい解決策はありますか？

4

2 に答える 2

2

でスクロールバーの位置を取得してwindow.pageYOffsetから、を使用window.scrollTo(0, y)して特定の場所にスクロールできます。

または$('#mydiv').scrollTop(newmsg_top)、jqueryで使用して、新しいメッセージまでスクロールダウンすることもできます。

どこvar newmsg_top = parseInt($('#mydiv li:last').offset().top);

これ#mydivがすべてのメッセージを含むdivです。
したがって#mydiv li:last、最後のメッセージを指します。
offset()ドキュメントに対する要素の現在の位置を返します。次の方法で最上位の位置を取得できます。.top

代わりに、親に対する相対的な位置が必要な場合は、position()

編集： ここで動作するjsfiddleを取得しました。ご覧ください。 注：最後の要素を表示している場合にのみダウンします（ユーザビリティの問題を解決するため）

于 2012-06-20T11:05:00.573 に答える
2

//これは追加後に最後までスクロールします

$("#mydiv").append("My data");
var newmsg_top = parseInt($('#mydiv')[0].scrollHeight );
$('#mydiv').scrollTop(newmsg_top);
于 2014-07-13T11:40:56.403 に答える