it-roy-ru.com

Как получить максимальное значение 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

Я думаю, что должен быть лучший способ, которым я забыл.

EDIT Чтобы уточнить, я также попробовал $(window).width() и $(document).width(), которые дали мне 1280 и 1580 соответственно.

41
Dave Stein

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

var maxScrollLeft = element.scrollWidth - element.clientWidth;

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

70
Angel Yordanov

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 является родителем/контейнером, а document дочерним/контентом.

Вот JSFiddle с этим примером: http://jsfiddle.net/yP3wW/

4
Larzan

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

Здесь я написал polyfill, который сделает это свойство доступным для 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);

используйте пример:

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

в основном этого будет достаточно.

Если нет, вы можете добавить отдельные функции напрямую. и вы получаете поддержку IE6 + и всех других браузеров. (теперь это будет зависеть от поддержки оператора. Это IE6 +)

Вот пример, который я решил добавить просто «я» в конце имени. 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, то у нативного не будет переопределения, и они находятся в двух разных местах в цепочке, а нативный имеет приоритет. И нативный не имеет тип функции. Атрибут, который за ним стоит геттер, как мы делали с полифилом выше, если я вызову его как функцию. Появится ошибка, сказав, что это не функция. И поэтому без изменения имени у нас возникнет проблема с Mozilla. для примера).

Посмотрите, как работает геттер, если вам нравится: 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+
2
Mohamed Allal

Простое решение

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

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

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

0
Tobias Cohen

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

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