web-dev-qa-db-ja.com

scrollLeftの最大値を取得するにはどうすればよいですか？

さて、私はjQueryを使用しており、現在これを行うスクロールバーの最大値を取得しています：

_var $body = $('body');
$body.scrollLeft(99999); // will give me the max value since I've overshot
var max_value = $body.scrollLeft(); // returns 300
$('body').scrollLeft(0);
_

私がこれを試すとき：_$body[0].scrollWidth_私はちょうど内容の実際の幅を取得します-1580

私が忘れているより良い方法がなければならないと考えています。

[〜＃〜] edit [〜＃〜]明確にするために、$(window).width()と$(document).width()も試してみました。それぞれ1280と1580になりました。

javascriptwidthscrollbar
43
Dave Stein

element.scrollLeftの最大値は次の方法で計算できます。

var maxScrollLeft = element.scrollWidth - element.clientWidth;

私が知らないブラウザ特有の癖があるかもしれないことに注意してください。

83
Angel Yordanov

知る限り、最大スクロール値を自分で計算する必要があります。これは、親/コンテナの幅と子/コンテンツの幅の差です。

JQueryでそれを行う方法の例：

HTML：

<div id="container">
    <div id="content">
        Very long text or images or whatever you need
    </div>
</div>

CSS：

#container {
    overflow:   scroll;
    width:      200px;
}
#content {
    width:      400px;
}

JS：

var maxScroll = $("#content").width() - $("#container").width();
// maxScroll would be 200 in this example

あなたの場合、windowは親/コンテナであり、documentchild /コンテンツ。

この例のJSFiddleを次に示します。 http://jsfiddle.net/yP3wW/

4
Larzan

まず第一に、mozillaに実装されているネイティブプロパティがあり、mozilla scrollLeftMax（またscrollTopMax）だけです。ここをご覧ください： https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax

ここで、polyfill iと書いて、そのプロパティを作成しますIE8 +で利用可能、および他のすべてのブラウザ。 jsファイルまたはコードの先頭に追加するだけです。

ポリフィルコードは次のとおりです。

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

使用例：

_var el = document.getElementById('el1');
var max = el.scrollLeftMax; 
_

ここでのサポートは、defineProperties()サポートに依存しています。これはIE8 +です（IE8の場合、このメソッドはポリフィルの使用とメソッドの場合に該当するDOM要素に対してのみサポートされます）。

サポートされているブラウザの全リストについては、こちらをご覧ください。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#compatNote_1

ほとんどそれで十分です。

そうでない場合は、個別の関数を直接を追加できます。 IE6 +および他のすべてのブラウザーのサポートが得られます。 （今ではオペレーターのサポートに依存しています。たまたまIE6 +です）

ここでは、名前の末尾に「i」だけを追加することを選択した例を示します。 scrollLeftMaxi()およびscrollTopMaxi()

_(function (elmProto) {
    elmProto.scrollTopMaxi = function () {
        return this.scrollTop - this.clientHeight;
    };
    elmProto.scrollLeftMaxi = function () {
        return this.scrollLeft - this.clientWidth;
    };
})(Element.prototype);
_

使用例：

_ var element = document.getElementById('el');
 var leftMax = element.scrollLeftMaxi();
 var topMax = element.scrollTopMaxi();
 console.log(leftMax);
 console.log(topMax);
_

上記のコードは、Elementプロトタイプのプロパティを作成し、定義した関数を割り当てます。 scrollLeftMaxi()が呼び出されたとき。プロトタイプチェーンは、_Element.prototype_に到達するまで走査されます。プロパティを見つける場所。プロトタイプチェーンに従うことを知ってください。そして、プロパティのチェック方法。チェーン内の異なる場所に同じ名前の2つのプロパティがある場合。予期しない動作が予想されます。 scrollLeftMaxiのような新しい名前が適しているのはそのためです。 （ネイティブmozillaのものと同じにした場合、ネイティブのものはオーバーライドされず、チェーン内の2つの異なる場所にあり、ネイティブのものが優先されます。ネイティブは関数型ではありません。関数として呼び出した場合、上記のポリフィルで行ったように、ゲッターが背後にあります。関数ではないことを示すエラーがトリガーされるため、名前を変更しないと、mozillaでこの問題が発生します。例）。

あなたが好きならゲッターがどのように機能するかをここで見てください： https://www.hongkiat.com/blog/getters-setters-javascript/

ここにフィドルテストがあり、mozillaのネイティブプロパティと同じ結果が得られることが示されています（mozilla内でテストしてください）。

_(function(elmProto) {
  elmProto.scrollTopMaxi = function() {
    return this.scrollHeight - this.clientHeight;
  };
  elmProto.scrollLeftMaxi = function() {
    return this.scrollWidth - this.clientWidth;
  };
})(Element.prototype);



// here we will test

var container = document.getElementById('container');

// here a comparison between the native of mozilla and this one 

console.log("scrollLeftMaxi = " + container.scrollLeftMaxi());
console.log("scrollLeftMax = " + container.scrollLeftMax);_
_#container {
  height: 500px;
  width: 700px;
  overflow: auto;
  border: solid 1px blue;
}

#inner {
  height: 2000px;
  width: 1500px;
  background: #928ae6;
}_
_<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div id="container">
      <div id="inner"></div>
    </div>

  </body>

</html>_

jqueryでそれを使用するのはどうですか：

_var max = $('#element')[0].scrollLeftMax; // when using the polyfill
var max =  $('#element')[0].scrollLeftMaxi(); // when using the other alternative more support IE6+
_
2
Mohamed Allal

シンプルなソリューションは

var maxScrollLeft = $(document).width() - $(window).width();
1
namal

$(document).width()を使用してドキュメントの幅全体を取得し、$(window).width()を使用してウィンドウ/ビューポートの幅を取得できます。

http://api.jquery.com/width/

0
Tobias Cohen

Jquery（> 1.9.1）：scrollLeftの最大値は次のとおりです。

$('#elemID').prop("scrollWidth") - $('#elemID').width();
0
Grant Bagwell