我如何制作连续的水平滚动

Question

I used a method that allow an auto scroll on mouse hover, but the thing I am looking to achieve is to make the items in the list continue scrolling even at the last item. ie: Let it continue to scroll starting from the first item again.

   $(function() {
     $(window).load(function() {
       var $gal = $("#propertyThumbnails"),
       galW = $gal.outerWidth(true),
       galSW = $gal[0].scrollWidth,
       wDiff = (galSW / galW) - 1, // widths difference ratio
       mPadd = 60, // mousemove Padding
       damp = 20, // Mmusemove response softness
       mX = 0, // real mouse position
       mX2 = 0, // modified mouse position
       posX = 0,
       mmAA = galW - (mPadd * 2), // the mousemove available area
       mmAAr = (galW / mmAA); // get available mousemove didderence ratio
         $gal.mousemove(function(e) {
       mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
       mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
       });
         setInterval(function() {
       posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay" 
       $gal.scrollLeft(posX * wDiff);
         }, 10);
       });
    });

Here is the method I used => Codepen

Thanks to Wilbur.

But like I said, I'd rather have it in continues scroll. And I'd appreciate some help here.

Answer 1

when you reach the end of the list, move the first item to the end(append it to the list). In the opposite direction take the last item and move it to the beginning(prepend the list) You will need to consider some time tweaking it, interactive scrollbars are tricky to get to the point where they feel fluent and organic