web-dev-qa-db-ja.com

divが下にスクロールされているかどうかを確認するにはどうすればよいですか?

JQueryやその他のJavaScriptライブラリを使用せずに、垂直スクロールバーを持つdivが一番下までスクロールされるかどうかを確認するにはどうすればよいですか?

私の質問は、一番下までスクロールする方法ではありません。その方法を知っています。 divが既に一番下までスクロールされているかどうかを確認したいと思います。

これは動作しません:

if (objDiv.scrollTop == objDiv.scrollHeight) 
59
Bjorn Tipling

あなたはscrollTop == scrollHeightを使用してかなり近くにいます。

scrollTopはスクロール位置の最上部を指し、scrollHeight - offsetHeightになります

Ifステートメントは次のようになります(トリプルイコールを使用することを忘れないでください)。

if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}

編集:私の答えを修正し、完全に間違っていました

76
James Davies

要素がスクロールの最後にある場合はtrueを返し、そうでない場合はfalseを返します。

element.scrollHeight - element.scrollTop === element.clientHeight

Mozilla Developer Network

7
eosimosu

境界線、水平スクロールバー、および/または浮動ピクセル数の可能性などを考慮に入れたときに正しい結果を得るために、使用する必要があります...

el.scrollHeight - el.scrollTop - el.clientHeight < 1

注:正しい結果を取得するには、offsetHeightの代わりにclientHeightを使用する必要があります。 offsetHeightは、elに境界線または水平スクロールバーがない場合にのみ正しい結果を提供します

6
Spencer

このパーティーに少し遅れましたが、上記の答えはどれも特にうまく機能しないようです...

  • ディスプレイのスケーリングは、UHDディスプレイのOSに適用されます
  • スケーリング/ズームがブラウザーに適用されます

すべての不測の事態に対応するには、計算されたスクロール位置を切り上げる必要があります。

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
6
series0ne