如何获取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
我在想一定有更好的办法让我忘记。
编辑为了澄清，我还尝试了$(window).width()和$(document).width()，它们分别给出了1280和1580。
回答 8
Stack Overflow用户
发布于 2011-04-18 22:28:04
您可以使用以下方法计算element.scrollLeft的最大值：
var maxScrollLeft = element.scrollWidth - element.clientWidth;请注意，可能有一些浏览器特定的怪癖，我没有意识到。
Stack Overflow用户
发布于 2018-01-14 09:50:08
首先，有一个原生属性是在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/
这是一个小提琴测试，它表明我们得到了与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>
将其与：一起使用会怎么样？
var max = $('#element')[0].scrollLeftMax; // when using the polyfill
var max = $('#element')[0].scrollLeftMaxi(); // when using the other alternative more support IE6+Stack Overflow用户
发布于 2014-03-13 18:16:00
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是父/容器，并文档子/内容。
下面是一个包含以下示例的JSFiddle：http://jsfiddle.net/yP3wW/
https://stackoverflow.com/questions/5138373
复制相似问题