Actualmente estoy usando el código de esta pregunta y este violín para lograr un bucle de desplazamiento infinito bidireccional para una página de imágenes de desplazamiento vertical. Esto funciona bien, sin embargo, cuando se cambia la escala de la ventana del navegador, se rompe. ¿Cómo lo haría responsivo? Además, ¿quizás ahora hay una mejor manera de abordar esto por completo?
var bgHeight = 1970; // pixel height of background image $(document).ready(function() { $('body').height(bgHeight + $(window).height()); $(window).scroll(function() { if ($(window).scrollTop() >= ($('body').height() - $(window).height())) { $(window).scrollTop(1); } else if ($(window).scrollTop() == 0) { $(window).scrollTop($('body').height() - $(window).height() - 1); } }); }); $(window).resize(function() { $('body').height(bgHeight + $(window).height()); }); html, body { height: 100%; overflow-x: none; } body { background-color: white; color: black; font-family: DecimaMono; font-size: 1rem; line-height: 1.85; height: 1970; width: 100vw; padding: 20px 20px; opacity: 100%; -moz-transition: all .15s ease-in; -o-transition: all .15s ease-in; -webkit-transition: all .15s ease-in; transition: all .15s ease-in; } img { max-width: 100%; max-height: 80vh; display: block; padding: 80px; background-color: #CCC; /* just for this demo */ } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="grid-3"> <img src="assets/Clints/Clints-3.jpg" alt="" /> <img src="assets/Clints/Clints-1.jpg" alt="" /> <img src="assets/Clints/Clints-2.jpg" alt="" /> <img src="assets/Clints/Clints-3.jpg" alt="" /> <img src="assets/Clints/Clints-1.jpg" alt="" /> </div>