如何获取scrollLeft的最大值？

Okay I'm using jQuery and currently getting max value of scrollbar doing this:

好吧我正在使用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);

When I try this: $body[0].scrollWidth I just get the actual width of the contents - 1580

当我尝试这个:$ body [0] .scrollWidth我只得到内容的实际宽度 - 1580

I'm thinking there has to be a better way I'm forgetting.

我想我必须忘记更好的方法。

EDIT To clarify, I also tried $(window).width() and $(document).width() which gave me 1280 and 1580, respectively.

编辑为了澄清,我还尝试了$(window).width()和$(document).width(),分别给了我1280和1580。

8 个解决方案

#1

You can calculate the maximum value of element.scrollLeft with:

您可以使用以下公式计算element.scrollLeft的最大值:

var maxScrollLeft = element.scrollWidth - element.clientWidth;

Note that there could be some browser specific quirks that I'm not aware of.

请注意,可能存在一些我不知道的浏览器特定怪癖。

#2

AFAIK you have to calculate the maximum scroll value yourself, it is the difference between the parent/container's width and the child/content width.

AFAIK你必须自己计算最大滚动值,它是父/容器的宽度和子/内容宽度之间的差异。

An example on how to do that with jQuery:

关于如何使用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

In your case window is the parent/container and document the child/content.

在您的情况下,窗口是父/容器,并记录子/内容。

Here is a JSFiddle with this example: http://jsfiddle.net/yP3wW/

这是一个带有这个例子的JSFiddle:http://jsfiddle.net/yP3wW/

#3

Simple solution is

简单的解决方案

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

#4

First of all there is a native property that is implemented in mozilla and only mozilla scrollLeftMax (also scrollTopMax). look here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax

首先,有一个在mozilla中实现的本机属性,只有mozilla scrollLeftMax(也是scrollTopMax)。看这里:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax

Here a polyfill i wrote that will make that property available for IE8+, and all the other browsers. Just add it at the top of your js file or code.

这里写的polyfill将使该属性可用于IE8 +和所有其他浏览器。只需将其添加到js文件或代码的顶部即可。

Here the polyfill code go:

这里的polyfill代码是:

(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);

use example:

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

The support here depend on defineProperties() support. which is IE8+ (for IE8 the method is supported for only DOM elements which is the case for our polyfill use and methods).

这里的支持取决于defineProperties()支持。这是IE8 +(对于IE8,该方法仅支持DOM元素,这是我们的polyfill使用和方法的情况)。

Look here for the whole list of supported browsers: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#compatNote_1

在此处查看支持的浏览器的完整列表:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#compatNote_1

mostly that will suffice.

大多数情况下就足够了。

If not you can add separate functions directly. and you get a support for IE6+ and all other browsers. (now it will depend on in operator support. which happen to be IE6+)

如果没有,您可以直接添加单独的功能。并且您获得了对IE6 +和所有其他浏览器的支持。 (现在它将取决于运营商支持。恰好是IE6 +)

Here an example i choosed to add just an 'i' to the end for the name. scrollLeftMaxi() and scrollTopMaxi()

这里有一个例子,我选择在名称的末尾添加一个“i”。 scrollLeftMaxi()和scrollTopMaxi()

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

use example :

使用示例:

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

The code above create the properties the Element prototype and assign the functions we defined. When called scrollLeftMaxi(). The prototype chain get traversed, until it Get to Element.prototype. Where it will find the property. Know that following the prototype chain. And how the properties are checked. If having two properties of same name at different place in the chain. Unexpected behavior is just to be expected. That's why a new name as scrollLeftMaxi is suited. (if i kept the same as the native mozilla one, the native one will not get override, and they are in two different place in the chain, and the native one take precedence. and the native is not of function type. An attribute that have a getter behind it, just like we did with the polyfill above, if i call it as a function. An error will trigger, saying it's not a function. and so without changing the name we will have this problem with mozilla. That was for an example).

上面的代码创建了Element原型的属性并分配了我们定义的函数。当调用scrollLeftMaxi()时。遍历原型链,直到它到达Element.prototype。它会在哪里找到该物业。知道跟随原型链。以及如何检查属性。如果在链中的不同位置具有两个相同名称的属性。意外的行为只是预期的。这就是为什么新名称scrollLeftMaxi适合的原因。 (如果我保持与本机mozilla相同,本机将不会被覆盖,并且它们位于链中的两个不同位置,而本机优先。本机不是函数类型。如果我把它作为一个函数调用它,就像我们对上面的polyfill所做的一样有一个吸气剂。一个错误会触发,说它不是一个函数。所以如果不改变名称我们就会遇到mozilla这个问题。那是例如)。

Look here how getter works if you like : https://www.hongkiat.com/blog/getters-setters-javascript/

如果您愿意,请查看getter的工作原理:https://www.hongkiat.com/blog/getters-setters-javascript/

here is a fiddle test, it show that we get the same result as the native property in mozilla (make sure to test within mozilla)

这是一个小提琴测试,它表明我们得到的结果与mozilla中的native属性相同(确保在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>

What about using that with jquery:

如何在jquery中使用它:

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

#5

You can use $(document).width() to get the full width of your document, and $(window).width() to get the width of the window/viewport.

您可以使用$(document).width()来获取文档的整个宽度,使用$(window).width()来获取窗口/视口的宽度。

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

#6

Jquery (>1.9.1): The maximum value scrollLeft can be is:

Jquery(> 1.9.1):scrollLeft的最大值可以是:

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

#7

I think that you could use something like this:

我认为你可以使用这样的东西:

this.children().width()*(this.children().length+1)-this.width()-10;

The previous line of code is going to get the width of one of the children and multiply this with by the number of chilren, finally you need to substract the width of the element minus an offteset

前一行代码将获得其中一个子代的宽度,并乘以chilren的数量,最后你需要减去元素的宽度减去一个偏移

#8

var scrollContainer = $('.b-partners .b-partners__inner');
var maxScrollLeft = $(scrollContainer)[0].scrollWidth - $(scrollContainer).width();
console.log(maxScrollLeft);