Looping Scroll Possible?

[MrUltimate]

Hi,

Is there way to use this and have it loop infinitely in either direction? Sort of like this website: https://www.kwokyinmak.com/

Appreciate all the help I can get! :)

[hew]

It's not really possible with the current architecture. I'll leave this open, though. Maybe someone else has an idea.

[cyruslk]

I was working on this until I saw this issue. I've been able to keep track of the translate3D() value, @hew is there a way to now reset the component to its initial translate3D value (e.g: (0, 0, 0))? Have you implemented something that can help us doing this?

Thanks for this package and help you can provide, much appreciated.

[hew]

Yes there is a way to directly manipulate the translate value, but it causes the scrollwheel to jump around and it makes for a poor user experience. At least that was what happened when I attempted.

I think @zachgibson wrapped this library with react-draggable at some point. I think that is the current meta.

[cyruslk]

This is a way to proceed but as you said, it creates a glitch that alters a bit the user experience.
1 - Monitor the translateY value and add the page's width,
2 - If it reaches the entire width of the component,
3 - Reset the loop by re-initing the component.

  window.addEventListener("wheel", event => {
     if(this.state.width > 600){

       // init the div;
       let scrollHorizontal =  Array.from(document.getElementsByClassName("scroll-horizontal"))[0];
       let scrollHorizontalInner = Array.from(scrollHorizontal.children)[0];

       // width of the entire div;
       let scrollHorizontalWidth = scrollHorizontalInner.getBoundingClientRect().width;

       // translation value {x, y, z}
       let scrollTranslateYNeg = this.getTranslate3d(scrollHorizontalInner)[0];
       let scrollTranslateY =  Math.abs(parseFloat(scrollTranslateYNeg));

       // end of the wheel is when page width + scrollTranslateY = scrollHorizontalWidth;
       let endScrollValue = scrollTranslateY + this.state.width + 2;


       if(endScrollValue > scrollHorizontalWidth){
         return this.makeTransition();
       }

       this.setState({
         isMouseWheel: true
       })
     }else{
       return null;
     }
   });

   getTranslate3d = (el) => {
      var values = el.style.transform.split(/\w+\(|\);?/);
        if (!values[1] || !values[1].length) {
            return [];
        }
        return values[1].split(/,\s?/g);
    };


   makeTransition = () => {
     let lookbookComponentsHome = this.state.lookbook
     .map((ele, index) => {
       return (
          <section
            className="lookbook_component_main_section"
            key={index}>
            <img
            alt={ele.link}
            src={ele.link} />
          </section>
       )
     });
     this.setState({
       lookbookComponentsHome: null,
     }, () => {
      this.setState({
        lookbookComponentsHome
      })
     })
   };

[hew]

This looping scroll issue is typically achieved by manipulating the items, not so much the scroll positioning.

Something like

if (position = maxWidth - item) {
   items.push(items[0])
}

[cyruslk]

Thanks for the response @hew! Could you expand on the items array and maybe give a more detailed example? Not sure to see how this can be done from this given piece of code.

[hew]

It's just pseudo code. But the idea is that you move the first item to the last spot when you reach a certain point. The scroll positioning doesn't change so much as the items in the array change/re-order.

This is how I've seen it done with other websites, but I could never nail an implementation that really worked with this library's architecture.

       ----------------------   
      ⬆️                   ⬇️
    item1 | item2 item3 | item1  

[cyruslk]

Ah I see. Clever.

[hew]

Gonna close this for now. I've started on V2. Whether or not I try and implement the above approach, I will try my best to enable a looping option.