web-dev-qa-db-ja.com

ドキュメントのスクロールトップの最大値を取得する方法

プラグインを作成していますが、ドキュメントの最大scrollTop値を取得する必要があります。 scrollTopの最大値は_2001_ですが、$(document).height()は_2668_を返し、$('body')[0].scrollHeightはundefinedを返します。

Javascript/jqueryを介して_2001_を取得する方法？！

javascriptjqueryscrolltop
15
hjuster

コメント内のコードは機能するはずです。

$(document).height() - $(window).height()

最大スクロール位置までスクロールしたときに警告する例を次に示します。 http://jsfiddle.net/DWn7Z/

30
Timm

これが私が書いた答えです https://stackoverflow.com/a/48246003/7668448 、それはElementオブジェクトのネイティブプロパティであるscrollTopMaxのポリフィルに関するものです。 （mozillaのみ）。レスポンスを見てください、あなたは本当にそれを好きにできます。

ほんの短いスニペットを怒鳴る。リンクの答えはより豊富です（必ず確認してください）。

(function(elmProto){
    if ('scrollTopMax' in elmProto) {
        return;
    }
    Object.defineProperties(elmProto, {
        'scrollTopMax': {
            get: function scrollTopMax() {
              return this.scrollHeight - this.clientTop;
            }
        },
        'scrollLeftMax': {
            get: function scrollLeftMax() {
              return this.scrollWidth - this.clientLeft;
            }
        }
    });
}
)(Element.prototype);

使用例：

var el = document.getElementById('el1');
var max = el.scrollLeftMax;
1
Mohamed Allal

スクロールトップの最大値を「推測」したい場合は、ドキュメントの高さとビューポートの高さ（ウィンドウのサイズ）を比較する必要があります。

/**
 * Return a viewport object (width and height)
 */
function viewport()
{
    var e = window, a = 'inner';
    if (!('innerWidth' in window))
    {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

// Retrieve the height of the document, including padding, margin and border
var documentHeight = $(document).outerheight(true);
var viewPortData = viewport();

var maxScrollTop = documentHeight - viewPortData.height;

もちろん、プラグインで、サイズ変更イベントにリスナーを追加し、最大のscrollTopを再計算する必要もあります。

1
MatRt

バニラジャバスクリプトで私は現在これをやっています：

getScrollTopMax = function () {
  var ref;
  return (ref = document.scrollingElement.scrollTopMax) != null
      ? ref
      : (document.scrollingElement.scrollHeight - document.documentElement.clientHeight);
};

これは Geckoの非標準のscrollTopMax が存在する場合はそれを返し、それ以外の場合は計算します。ここでは、特定のブラウザにのみ存在するdocument.scrollingElementを使用していますが、これは 簡単にポリフィルできる です。

1
tremby