javascript - vertical - ¿Cómo obtengo el valor máximo de scrollLeft?
scrollleft not working (8)
De acuerdo, estoy usando jQuery y actualmente obtengo el valor máximo de la barra de desplazamiento al hacer esto:
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);
Cuando intento esto: $body[0].scrollWidth , obtengo el ancho real de los contenidos - 1580
Estoy pensando que tiene que haber una mejor manera de olvidarlo.
EDITAR Para aclarar, también probé $(window).width() y $(document).width() que me dieron 1280 y 1580, respectivamente.
AFAIK usted tiene que calcular el valor de desplazamiento máximo usted mismo, es la diferencia entre el ancho del padre / contenedor y el ancho del elemento secundario / contenido.
Un ejemplo de cómo hacer eso con 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
En su ventana de caso es el padre / contenedor y documente el hijo / contenido.
Aquí hay un JSFiddle con este ejemplo: http://jsfiddle.net/yP3wW/
Creo que podrías usar algo como esto:
this.children().width()*(this.children().length+1)-this.width()-10;
La línea de código anterior va a obtener el ancho de uno de los hijos y multiplica esto por el número de hijos, finalmente debe restar el ancho del elemento menos un conjunto de datos
En primer lugar, hay una propiedad nativa que se implementa en mozilla y solo mozilla scrollLeftMax (también scrollTopMax ). mira aquí: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax
Aquí un polyfill que escribí que hará que esa propiedad esté disponible para IE8 + y para todos los otros navegadores . Solo agrégalo en la parte superior de tu archivo js o código.
Aquí el código de polyfill va:
(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);
usar ejemplo:
var el = document.getElementById(''el1'');
var max = el.scrollLeftMax;
El soporte aquí depende del defineProperties() de defineProperties() . que es IE8 + (para IE8, el método solo es compatible con elementos DOM, que es el caso de nuestro uso y métodos de relleno de poliuretano).
Busque aquí toda la lista de navegadores compatibles: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#compatNote_1
sobre todo eso será suficiente.
Si no, puede agregar funciones separadas directamente . y obtienes soporte para IE6 + y todos los demás navegadores . (ahora dependerá del soporte del operador, que es IE6 +)
Aquí un ejemplo que elegí para agregar solo una ''i'' al final del nombre. scrollLeftMaxi() y scrollTopMaxi()
(function (elmProto) {
elmProto.scrollTopMaxi = function () {
return this.scrollTop - this.clientHeight;
};
elmProto.scrollLeftMaxi = function () {
return this.scrollLeft - this.clientWidth;
};
})(Element.prototype);
usar ejemplo:
var element = document.getElementById(''el'');
var leftMax = element.scrollLeftMaxi();
var topMax = element.scrollTopMaxi();
console.log(leftMax);
console.log(topMax);
El código anterior crea las propiedades del prototipo del Elemento y asigna las funciones que definimos. Cuando se llama scrollLeftMaxi() . La cadena de prototipos se atraviesa, hasta llegar a Element.prototype . Donde encontrará la propiedad. Sepa eso siguiendo la cadena del prototipo. Y cómo se controlan las propiedades. Si tiene dos propiedades del mismo nombre en diferentes lugares de la cadena. Comportamiento inesperado es de esperar. Es por eso que un nuevo nombre como scrollLeftMaxi es adecuado. (Si guardo lo mismo que el mozilla nativo, el nativo no se sobrescribirá, y están en dos lugares diferentes en la cadena, y el nativo tiene prioridad. Y el nativo no es del tipo de función. Un atributo que tener un getter detrás, al igual que lo hicimos con el polyfill anterior, si lo llamo como una función. Se disparará un error, diciendo que no es una función, y sin cambiar el nombre tendremos este problema con mozilla. para un ejemplo).
Mire aquí cómo funciona Getter si lo desea: https://www.hongkiat.com/blog/getters-setters-javascript/
Aquí hay una prueba de violín, muestra que obtenemos el mismo resultado que la propiedad nativa en mozilla (asegúrese de probar dentro de 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>
¿Qué hay de usar eso con jquery?
var max = $(''#element'')[0].scrollLeftMax; // when using the polyfill
var max = $(''#element'')[0].scrollLeftMaxi(); // when using the other alternative more support IE6+
Jquery (> 1.9.1): el valor máximo que scrollLeft puede ser es:
$(''#elemID'').prop("scrollWidth") - $(''#elemID'').width();
La solución simple es
var maxScrollLeft = $(document).width() - $(window).width();
Puede calcular el valor máximo de element.scrollLeft con:
var maxScrollLeft = element.scrollWidth - element.clientWidth;
Tenga en cuenta que podría haber algunos caprichos específicos del navegador que no conozco.
Puede usar $(document).width() para obtener el ancho completo de su documento, y $(window).width() para obtener el ancho de la ventana / ventana gráfica.
var scrollContainer = $(''.b-partners .b-partners__inner'');
var maxScrollLeft = $(scrollContainer)[0].scrollWidth - $(scrollContainer).width();
console.log(maxScrollLeft);