How do I get the max value of 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

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

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

65598 次浏览
小开

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

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

小开
最佳答案

你可以用以下方法计算 element.scrollLeft的最大值:

var maxScrollLeft = element.scrollWidth - element.clientWidth;

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

小开

我觉得你可以用这个:

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

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

小开

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;
}

约翰逊:

var maxScroll = $("#content").width() - $("#container").width();
// maxScroll would be 200 in this example

在您的示例中，window是父/容器，而 文件是子/内容。

下面是带有这个示例的 JSFiddle: http://jsfiddle.net/yP3wW/

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

简单的解决办法就是

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

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

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

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

这里写了一个 填料，它将使该属性 可用于 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);

use example:

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

这里的支持依赖于 defineProperties()支持。它是 IE8 + (对于 IE8，该方法只支持 DOM 元素，这是我们的填充使用和方法的情况)。

在这里可以找到所有支持的浏览器列表: 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 直接分离功能. and you get a support for IE6 + 和所有其他浏览器. (now it will depend on in operator support. which happen to be 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);

上面的代码创建 Element 原型的属性并分配我们定义的函数。当被称为 scrollLeftMaxi()。原型链被穿过，直到到达 Element.prototype。能找到财产的地方。要知道，按照原型链。以及如何检查属性。如果在链的不同位置有两个相同名称的属性。意料之外的行为是意料之中的。这就是为什么一个新的名字作为 scrollLeftMaxi是适合的。(如果我保持与本地 mozilla 1相同，本地 mozilla 1不会被覆盖，它们在链中的两个不同位置，本地 mozilla 1优先。并且本机不属于函数类型。一个后面有 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>

如何在 jquery 中使用它:

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

提交答案