es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Javascript: La función scrollTo no funcionará en Firefox.

16 Jul, 2023 Programación

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>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 de scrollHeight 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 propiedad clientHeight en lugar de scrollHeight, 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:

    window.addEventListener('load', () => {
  let test = {
    id: document.getElementById('test'),
    height: document.getElementById('test').clientHeight,
    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)
}

    Al utilizar clientHeight, el código debería funcionar correctamente en Firefox, así como en Chrome y Brave.

Comments are closed.