How to allow the user to scroll a list continuously?

I have a div container with a scroll overflow. It contains a number of child elements in it which scroll like a list. Once the user scrolls all the way to the bottom, I want the top items of the list to re-emerge from the bottom as if it is a continuous, infinite list but with the same items.

The reason is that the list contains links which get highlighted once they are in the vertical center of the page. I want an unending list so that all the items can be highlighted.

I couldn't find any examples or references which helped in my case. Any help would be highly appreciated :)

Answers 1

  • You can try this.

    <div class="Parent-Wrapper">
    <div class="Child-Wrapper">
     <a href="">Link 1</a>
     <a href="">Link 2</a>
     <a href="">Link 3</a>
     <a href="">Link 4</a>
    </div>
    <div class="Child-Wrapper">
     <a href="">Link 5</a>
     <a href="">Link 6</a>
     <a href="">Link 7</a>
     <a href="">Link 8</a>
    </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
    setInterval(function(){
    var FirstChildDiv  = $('.Child-Wrapper:eq(1)').html();
    //Remove First Element
    $('.Child-Wrapper:eq(1)').remove();
    //Append Removed Element To Next Occuring In Parent Div
    $('.Parent-Wrapper').append(FirstChildDiv);
    // Thats It.
    },5000);
    });
    </script>
    

Related Articles