Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

186
Vistas
Copie el cuerpo al desplazarse hasta la parte inferior de la página (desplazamiento en bucle)

Estoy tratando de hacer un efecto de desplazamiento en bucle y funciona bastante bien en el escritorio, pero tiene un poco de errores en el móvil.

Enlace a la demostración: http://create-to-regenerate.com/create-to-regenerate-site/

Código:

 var doc = window.document, context = doc.querySelector('.loop'), items = doc.querySelectorAll('.loopItem'), clones = [], disableScroll = false, scrollHeight = 0, scrollPos = 0, clonesHeight = 0 function getScrollPos () { return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0) } function setScrollPos (pos) { context.scrollTop = pos } function getClonesHeight () { clonesHeight = 0 Array.from(clones, clone => { clonesHeight = clonesHeight + clone.offsetHeight }) return clonesHeight } function reCalc () { scrollPos = getScrollPos() scrollHeight = context.scrollHeight clonesHeight = getClonesHeight() if (scrollPos <= 0) { setScrollPos(1) // Scroll 1 pixel to allow upwards scrolling } } function scrollUpdate () { if (!disableScroll) { scrollPos = getScrollPos() if (clonesHeight + scrollPos >= scrollHeight) { // Scroll to the top when you've reached the bottom setScrollPos(1) // Scroll down 1 pixel to allow upwards scrolling disableScroll = true } else if (scrollPos <= 0) { // Scroll to the bottom when you reach the top setScrollPos(scrollHeight - clonesHeight) disableScroll = true } } if (disableScroll) { // Disable scroll-jumping for a short time to avoid flickering window.setTimeout(function () { disableScroll = false }, 10) } } function onLoad () { Array.from(items, item => { const clone = item.cloneNode(true) context.appendChild(clone) clone.classList.add('js-clone') }) clones = context.querySelectorAll('.js-clone') reCalc() context.addEventListener('scroll', function () { window.requestAnimationFrame(scrollUpdate) }, false) window.addEventListener('resize', function () { window.requestAnimationFrame(reCalc) }, false) } window.onload = onLoad

En este sitio: https://diplomats.tv/ , el contenido simplemente se agrega al cuerpo cuando se desplaza hacia abajo, y esta podría ser una solución para obtener el mismo efecto en dispositivos móviles, pero no estoy seguro de cómo lograrlo. ¿este efecto? Gracias :)

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda