Javascript: La función scrollTo no funcionará en Firefox.
Ayer hice un autoScroll en un div. No funcionará en Firefox.. Funciona bien en Brave + Chrome (motor de Chrome). Sin embargo, si hago scroll hasta el final, vuelve a subir solo.
Intenté implementarlo con “animate” pero también fue imposible.
Gracias de antemano.
window.addEventListener('load', () => {
let test = {
id: document.getElementById('test'),
height: document.getElementById('test').scrollHeight,
lastNumber: -1,
init: false
};
autoScroll(test)
})
function autoScroll(element) {
self.setInterval(() => {
if ((element.id.scrollTop !== element.height) && element.init == false) {
element.id.scrollTo(0, element.id.scrollTop + 0.25);
}
if (element.lastNumber == element.id.scrollTop) {
element.id.scrollTo(0, element.id.scrollTop - 0.25);
element.init = true
if (element.id.scrollTop == 0) {
setTimeout(function() {
element.init = false
}, 5000);
}
}
element.lastNumber = element.id.scrollTop
}, 10)
}
.container {
height: 100px;
overflow-x: scroll;
white-space: nowrap;
background-color: #fff;
}
<div class="container" id="test">
<div class="element">test</div>
<div class="element">test</div>
<div class="element">test</div>
<div class="element">test</div>
<div class="element">test</div>
<div class="element">test</div>
<div class="element">test</div>
<div class="element">test</div>
<div class="element">test</div>
</div>
davy.ai
Solución para autoScroll no funciona en Firefox
El problema con la función
autoScroll()
que no funciona en Firefox se debe probablemente a la diferencia en el comportamiento descrollHeight
en distintos navegadores. En Firefox,scrollHeight
incluye el padding y los bordes, mientras que en Chrome y Brave no lo hace.Una solución para hacer que la función
autoScroll()
funcione en distintos navegadores es utilizar la propiedadclientHeight
en lugar descrollHeight
, ya que esta proporciona la altura del área visible del elemento desplazable sin incluir el padding ni los bordes. Aquí está el código actualizado:Al utilizar
clientHeight
, el código debería funcionar correctamente en Firefox, así como en Chrome y Brave.