質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2488閲覧

【jQuery】常に下のほうにスクロールする

ckaposndbbba

総合スコア210

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/12/13 12:16

こんにちは。
下にスクロールできるdivがあります。

html

1<div class="mess"></div>

CSSはこんな感じです。

css

1.mess { 2 height: 250px; 3 overflow-y: auto; 4}

divには、あるイベントで下のような要素をappendしています。

html

1<div class="mess_child">...</div>

(そのイベントは何回も発生します。)

で、その要素は常に一番最後の.mess_childにのみ#latestを付与しています(前のlatestを削除する処理はできています)。

それで、どんどん要素が追加されるのですが、
heightが250pxですので、それを超えると.messからはみ出て表示されなくなります。

スクロールすれば表示されますが、それをjQueryで自動的に下までスクロールしたいのです。
というところまではできています。
こんなコードを書きました。

javascript

1var pos = $("#latest").position(); 2$(".mess").scrollTop(pos.top);

ところがです。

ある一定のheight以上になると、なぜか変な位置までしかスクロールしてくれないのです。
コードに問題があるのでしょうか?

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.position() ではダメですね。
position: static 以外の直近の親要素からの相対位置を返すということで、内部をスクロールすると値が変わります。

つまり、親要素 .mess の内部をスクロールして、子要素が上へ上へ移動すると、.position() の返り値はどんどん小さくなっていき、上に見切れたものは負数になります。

これは望んでいる値ではありませんよね。
.messの最大スクロール長が知りたいのですよね。

javascript

1var $mess = $(".mess"); 2$mess.get(0).scrollHeight - $mess.outerHeight(); // コレ

で求められるのが最大スクロール長になるはずです。

$mess.get(0).scrollHeight が収まりきっていない部分を含めた内部の高さの合計です。
ここから、収まっている部分 = 表示領域の高さ $mess.outerHeight()を引くと、収まっていない部分だけの高さ、
つまりスクロール範囲の最大値が求められます。

投稿2015/12/14 13:22

編集2015/12/14 13:23
tozjp

総合スコア790

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問