Question

好的我正在使用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

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

修改为了澄清，我还尝试了$(window).width()和$(document).width()，分别给了我1280和1580.

Answer 1

您可以使用

计算element.scrollLeft的最大值

var maxScrollLeft = element.scrollWidth - element.clientWidth;

请注意，我可能不知道某些特定于浏览器的怪癖。

Answer 2

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

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

在您的情况下，窗口是父/容器，文档是子/内容。

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

Answer 3

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

我编写的 polyfill 会使该属性可用于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元素，这是我们的polyfill使用和方法的情况）。

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

大多数情况下就足够了。

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

这里有一个例子，我选择只添加一个＆＃39; i＆＃39;到了最后的名字。 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。它会在哪里找到该物业。知道跟随原型链。以及如何检查属性。如果在链中的不同位置具有两个相同名称的属性。意外的行为只是预期的。这就是为什么新名称scrollLeftMaxi适合的原因。（如果我保持与本机mozilla相同，本机将不会被覆盖，并且它们位于链中的两个不同位置，并且本机优先。本机不是函数类型。如果我把它作为一个函数调用它，就像我们对上面的polyfill所做的一样有一个吸气剂。一个错误会触发，说它不是一个函数。所以如果不改变名称，我们就会遇到这个问题mozilla。这是一个例子。）

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

这是一个小提琴测试，它表明我们得到与mozilla中的native属性相同的结果（确保在mozilla中测试）

＆＃13;

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

＆＃13;

#container {
  height: 500px;
  width: 700px;
  overflow: auto;
  border: solid 1px blue;
}

#inner {
  height: 2000px;
  width: 1500px;
  background: #928ae6;
}

＆＃13;

<!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>

＆＃13;

如何使用jquery：

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

Answer 4

简单的解决方案是

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

Answer 5

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

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

Answer 6

Jquery（＆gt; 1.9.1）：最大值['+', '+', '+', '-', '-', '-', '-', '-', '+', '+']可以是：

scrollLeft

Answer 7

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

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

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

Answer 8

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

如何获取scrollLeft的最大值？

8 个答案: