I'm currently using code from this question and this fiddle to achieve a bi-directional infinite scroll loop for a page of vertically scrolling images. This is working fine, however when the browser window is rescaled it breaks. How would I make it responsive? Also maybe there is a better way to approach this altogether now?
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>