如何获得scrollLeft的最大值？

发布于 2024-10-19 09:20:49 字数 464 浏览 1 评论 0原文

好吧，我正在使用 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。

原文

Okay I'm using jQuery and currently getting max value of scrollbar doing this:

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].scrollWidth I just get the actual width of the contents - 1580

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

虫児飞 2024-10-26 09:20:49

您可以使用以下方法计算 element.scrollLeft 的最大值：

var maxScrollLeft = element.scrollWidth - element.clientWidth;

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

You can calculate the maximum value of element.scrollLeft with:

var maxScrollLeft = element.scrollWidth - element.clientWidth;

Note that there could be some browser specific quirks that I'm not aware of.

回复收藏 0 原文

善良天后 2024-10-26 09:20:49

首先，有一个本机属性在 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);

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

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

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

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

Here a polyfill I 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.

Here the polyfill code go:

(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).

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

mostly that will suffice.

If you cannot add separate functions directly. and you get a support for IE6+ and all other browsers. (now it will depend on in operator support, which happens to be IE6+)

Here an example I chose to add just an 'i' to the end for the name. scrollLeftMaxi() and 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 scrollLeftMaxi is 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).

Look here how getter works if you like :
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)

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

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

回复收藏 0 原文

纸伞微斜 2024-10-26 09:20:49

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

在您的情况下，窗口是父/容器，文档是子/内容。

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

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.

An example on how to do that with 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

In your case window is the parent/container and document the child/content.

Here is a JSFiddle with this example: http://jsfiddle.net/yP3wW/

回复收藏 0 原文

爱的那么颓废 2024-10-26 09:20:49

简单的解决方案是

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

Simple solution is

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

回复收藏 0 原文

江城子 2024-10-26 09:20:49

Jquery (>1.9.1)：scrollLeft 的最大值为：

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

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

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

回复收藏 0 原文

寄与心 2024-10-26 09:20:49

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

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

回复收藏 0 原文

天煞孤星 2024-10-26 09:20:49

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

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

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

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

回复收藏 0 原文

素染倾城色 2024-10-26 09:20:49

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

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

回复收藏 0 原文

~没有更多了~