Прежде всего, есть нативное свойство, которое реализовано в 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+