Javascript 如何获得 scrollLeft 的最大值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5138373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get the max value of scrollLeft?
提问by Dave Stein
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].scrollWidthI 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.
我想必须有更好的方法我忘记了。
EDITTo clarify, I also tried $(window).width()and $(document).width()which gave me 1280 and 1580, respectively.
编辑为了澄清，我也试过$(window).width()，$(document).width()分别给了我 1280 和 1580。
回答by Angel Yordanov
You can calculate the maximum value of element.scrollLeftwith:
您可以计算最大值element.scrollLeft：
var maxScrollLeft = element.scrollWidth - element.clientWidth;
Note that there could be some browser specific quirks that I'm not aware of.
请注意，可能存在一些我不知道的特定于浏览器的怪癖。
回答by Larzan
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:
HTML：
<div id="container">
<div id="content">
Very long text or images or whatever you need
</div>
</div>
CSS:
CSS：
#container {
overflow: scroll;
width: 200px;
}
#content {
width: 400px;
}
JS:
JS：
var maxScroll = $("#content").width() - $("#container").width();
// maxScroll would be 200 in this example
In your case windowis the parent/container and documentthe child/content.
在您的情况下，窗口是父/容器并记录子/内容。
Here is a JSFiddle with this example: http://jsfiddle.net/yP3wW/
这是一个带有此示例的 JSFiddle：http: //jsfiddle.net/yP3wW/
回答by namal
Simple solution is
简单的解决办法是
var maxScrollLeft = $(document).width() - $(window).width();
回答by Mohamed Allal
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(also scrollTopMax)。看这里：https: //developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax
Here a polyfilli 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 scrollLeftMaxiis 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 保持一样，原生的不会被覆盖，它们在链中的两个不同的地方，原生的优先。原生不是函数类型的。一个属性它背后有一个 getter，就像我们对上面的 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+
回答by Grant Bagwell
Jquery (>1.9.1): The maximum value scrollLeftcan be is:
Jquery (>1.9.1)：最大值scrollLeft可以是：
$('#elemID').prop("scrollWidth") - $('#elemID').width();
回答by Tobias Cohen
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()获取窗口/视口的宽度。
回答by Luis Vargas
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
前一行代码将获取其中一个孩子的宽度并将其乘以孩子的数量，最后您需要减去元素的宽度减去偏移量
回答by Nehlatak
var scrollContainer = $('.b-partners .b-partners__inner');
var maxScrollLeft = $(scrollContainer)[0].scrollWidth - $(scrollContainer).width();
console.log(maxScrollLeft);
