Integrated continuous scroll loop

Question

I have a code similar to:

<div id='right-column'> <div id='results'> <div id='result1> <div class='main'></div> <div class='details'></div> </div> <!-- ... --> <div id='result50> <div class='main'></div> <div class='details'></div> </div> </div> </div> 

• the total number of results depends on the ajax request, I dynamically insert all the results in one go.
• div.main always displayed (fixed height) and div.details "unfolds / folds" below div.main when the user clicks on the result div .
• div height information may vary.

If #results scrollHeight greater than #right-column height , I would like to create a continuous scroll loop.
In this case, scrolling in the past #result50 will show #result1 , scrolling to #result1 will show #result50 .

I cannot .append() first child from below, as in some cases the result part may be visible above and below the column.
I cannot duplicate result unless I find if .details unfolding / folding.
The fact that the height of a result can change when the user expands the div .details makes it even more complex ...

Here is an example of a continuous scroll cycle (2 columns):

 $(document).ready(function() { var num_children = $('#up-left').children().length; var child_height = $('#up-left').height() / num_children; var half_way = num_children * child_height / 2; $(window).scrollTop(half_way); function crisscross() { $('#up-left').css('bottom', '-' + window.scrollY + 'px'); $('#down-right').css('bottom', '-' + window.scrollY + 'px'); var firstLeft = $('#up-left').children().first(); var lastLeft = $('#up-left').children().last(); var lastRight = $('#down-right').children().last(); var firstRight = $('#down-right').children().first(); if (window.scrollY > half_way ) { $(window).scrollTop(half_way - child_height); lastRight.appendTo('#up-left'); firstLeft.prependTo('#down-right'); } else if (window.scrollY < half_way - child_height) { $(window).scrollTop(half_way); lastLeft.appendTo('#down-right'); firstRight.prependTo('#up-left'); } } $(window).scroll(crisscross); }); 

 div#content { width: 100%; height: 100%; position: absolute; top:0; right:0; bottom:0; left:0; } #box { position: relative; vertical-align:top; width: 100%; height: 200px; margin: 0; padding: 0; } #up-left { position:absolute; z-index:4px; left: 0; top: 0px; width: 50%; margin: 0; padding: 0; } #down-right { position:fixed; bottom: 0px; z-index: 5px; left: 50%; width: 50%; margin: 0; padding: 0; } h1 {margin: 0;padding: 0;color:#fff} .black {background: black;} .white {background: grey;} .green {background: green;} .brown {background: brown;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div id="content"> <div id="up-left"> <div id="box" class="brown"> <h1>ONE</h1> </div> <div id="box" class="black"> <h1>TWO</h1> </div> <div id="box" class="white"> <h1>THREE</h1> </div> <div id="box" class="black"> <h1>FOUR</h1> </div> <div id="box" class="white"> <h1>FIVE</h1> </div> <div id="box" class="black"> <h1>SIX</h1> </div> </div><!-- #up-left --> <div id="down-right"> <div id="box" class="white"> <h1>SIX</h1> </div> <div id="box" class="black"> <h1>FIVE</h1> </div> <div id="box" class="white"> <h1>FOUR</h1> </div> <div id="box" class="black"> <h1>THREE</h1> </div> <div id="box" class="white"> <h1>TWO</h1> </div> <div id="box" class="green"> <h1>ONE</h1> </div> </div><!-- #down-right --> </div><!-- .content --> 

(fiddle: http://jsfiddle.net/franckl/wszg1d6c/ )

Any tips / ideas on how I can do this?

Answer 1

Move items up or down depending on the scroll direction

You can use jQuery .append() and .prepend() to move items without cloning.

You will use similar methods for endless scrolling with lazy loading (AJAX), but in this case you want to handle scrolling up and down, and instead of loading new content from the server, you simply recycle the existing DOMs in the list.

Below I demonstrate one method. I save the scroll position in the cache of the .data element for easy search when determining the direction of the scroll. I decided to determine the scroll direction to avoid unnecessary variable assignments to improve performance. Otherwise, you will receive elements and do the math for the scroll event, which will not occur in this direction.

Scroll handler:

 $('#right-column').on('scroll', function (e) { var $this = $(this), $results = $("#results"), scrollPosition = $this.scrollTop(); if (scrollPosition > ($this.data('scroll-position') || 0)) { // Scrolling down var threshold = $results.height() - $this.height() - $('.result:last-child').height(); if (scrollPosition > threshold) { var $firstResult = $('.result:first-child'); $results.append($firstResult); scrollPosition -= $firstResult.height(); $this.scrollTop(scrollPosition); } } else { // Scrolling up var threshold = $('.result:first-child').height(); if (scrollPosition < threshold) { var $lastResult = $('.result:last-child'); $results.prepend($lastResult); scrollPosition += $lastResult.height(); $this.scrollTop(scrollPosition); } } $this.data('scroll-position', scrollPosition) }); 

Full working example:

 $('#right-column').on('scroll', function (e) { var $this = $(this), $results = $("#results"), scrollPosition = $this.scrollTop(); if (scrollPosition > ($this.data('scroll-position') || 0)) { // Scrolling down var threshold = $results.height() - $this.height() - $('.result:last-child').height(); if (scrollPosition > threshold) { var $firstResult = $('.result:first-child'); $results.append($firstResult); scrollPosition -= $firstResult.height(); $this.scrollTop(scrollPosition); } } else { // Scrolling up var threshold = $('.result:first-child').height(); if (scrollPosition < threshold) { var $lastResult = $('.result:last-child'); $results.prepend($lastResult); scrollPosition += $lastResult.height(); $this.scrollTop(scrollPosition); } } $this.data('scroll-position', scrollPosition) }); $('#results').on('click', '.result', function (e) { $(this).find('.details').toggle(); }); $('#newNumber').on('input', function (e) { var results = ''; for (var n = 1; n <= $(this).val(); n++) { results += '<div class="result" id="result' + n + '">' + ' <div class="main">Result ' + n + '</div>' + ' <div class="details">Details for result ' + n + '</div>' + '</div>'; } $('#results').html(results); }); 

 body { font-family: sans-serif; } h1 { font: bold 2rem/1 Georgia, serif; } p { line-height: 1.5; margin-bottom: 1em; } label { font-weight: bold; margin-bottom: 1em; } .column { box-sizing: border-box; float: left; width: 50%; height: 100vh; padding: 1em; overflow: auto; } #right-column { background-color: LemonChiffon; } .result { padding: 1em; cursor: pointer; } .result .main { height: 2em; font-weight: bold; line-height: 2; } .result .details { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class= "column" id="left-column"> <p>Existing DOM elements are moved to the top or bottom of the list depending on your scroll direction.</p> <label>Change the number of results to display <input id="newNumber" type="number" value="10" /> </div> <div class= "column" id="right-column"> <div id="results"> <div id="result1" class="result"> <div class="main">Result 1</div> <div class="details">Details for result 1</div> </div> <div id="result2" class="result"> <div class="main">Result 2</div> <div class="details">Details for result 2</div> </div> <div id="result3" class="result"> <div class="main">Result 3</div> <div class="details">Details for result 3</div> </div> <div id="result4" class="result"> <div class="main">Result 4</div> <div class="details">Details for result 4</div> </div> <div id="result5" class="result"> <div class="main">Result 5</div> <div class="details">Details for result 5</div> </div> <div id="result6" class="result"> <div class="main">Result 6</div> <div class="details">Details for result 6</div> </div> <div id="result7" class="result"> <div class="main">Result 7</div> <div class="details">Details for result 7</div> </div> <div id="result8" class="result"> <div class="main">Result 8</div> <div class="details">Details for result 8</div> </div> <div id="result9" class="result"> <div class="main">Result 9</div> <div class="details">Details for result 9</div> </div> <div id="result10" class="result"> <div class="main">Result 10</div> <div class="details">Details for result 10</div> </div> </div> </div> 

Full working example in CodePen , if you prefer.