如何获取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

您可以使用以下公式计算最大值element.scrollLeft:

var maxScrollLeft = element.scrollWidth - element.clientWidth;

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

Answer 2

首先，有一个在 mozilla 中实现的本地属性，并且只有 mozilla scrollLeftMax(also 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);

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

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

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

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

(function (elmProto) {
    elmProto.scrollTopMaxi = function () {
        return this.scrollTop - this.clientHeight;
    };
    elmProto.scrollLeftMaxi = function () {
        return this.scrollLeft - this.clientWidth;
    };
})(Element.prototype);

将它与 jquery 一起使用怎么样：

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