如何获得 scrollLeft 的最大值？

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

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

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

Answer 2

你可以计算element.scrollLeft的最大值：

var maxScrollLeft = element.scrollWidth - element.clientWidth;

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

Answer 3

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

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

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

Answer 4

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

在您的情况下，window 是父/容器，document 是子/内容。

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

Answer 5

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

Answer 6

简单的解决方案是

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

Answer 7

jquery(>1.9.1)：scrollLeft的最大值可以是：

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

Answer 8

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

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

这里是 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);

使用示例：

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+）

这是一个示例，我选择在名称末尾添加一个“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);

上面的代码创建元素原型的属性并分配我们定义的函数。当调用scrollLeftMaxi()。遍历原型链，直到到达Element.prototype。它会在哪里找到财产。知道遵循原型链。以及如何检查属性。如果在链中的不同位置有两个同名的属性。意外的行为是意料之中的。这就是为什么新名称scrollLeftMaxi 比较合适的原因。 （如果我保持与原生 Mozilla 相同，则原生不会被覆盖，并且它们在链中的两个不同位置，并且原生优先。并且原生不是函数类型。一个属性它后面有一个getter，就像我们对上面的polyfill所做的那样，如果我将它作为一个函数调用。会触发一个错误，说它不是一个函数。所以如果不更改名称，我们将在mozilla中遇到这个问题。那是举个例子）。

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

这是一个 fiddle 测试，它表明我们得到了与 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>

如何将它与 jquery 一起使用：

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