Как получить максимальное значение scrollLeft?

Ответ 1

Вы можете вычислить максимальное значение element.scrollLeft с помощью:

var maxScrollLeft = element.scrollWidth - element.clientWidth;

Обратите внимание, что могут быть некоторые специфические особенности браузера, о которых я не знаю.

Ответ 2

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/

Ответ 3

Простым решением является

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

Ответ 4

Вы можете использовать $(document).width() для получения полной ширины вашего документа и $(window).width(), чтобы получить ширину окна/области просмотра.

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

Ответ 5

JQuery ( > 1.9.1): Максимальное значение scrollLeft может быть:

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

Ответ 6

Прежде всего, есть собственное свойство, которое реализовано в mozilla и только mozilla scrollLeftMax (также scrollTopMax). смотрите здесь: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax

Здесь polyfill, который сделает это свойство доступным для IE8 + и всех других браузеров. Просто добавьте его вверху вашего js файла или кода.

Здесь код polyfill go:

(function(elmProto){
    if ('scrollTopMax' in elmProto) {
        return;
    }
    Object.defineProperties(elmProto, {
        'scrollTopMax': {
            get: function scrollTopMax() {
              return this.scrollHeight - this.clientTop;
            }
        },
        'scrollLeftMax': {
            get: function scrollLeftMax() {
              return this.scrollWidth - this.clientLeft;
            }
        }
    });
}
)(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.clientLeft;
    };
})(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, то native не будет переопределен, и они находятся в двух разных местах в цепочке, а native имеет приоритет, а native - не типа функции. у меня есть геттер, как мы это сделали с 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>

Ответ 7

Я думаю, что вы могли бы использовать что-то вроде этого:

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

Предыдущая строка кода будет получать ширину одного из дочерних элементов и умножить это на количество chilren, наконец, вам нужно вычесть ширину элемента минус offteset

Ответ 8

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