Set start position of Draggable when using type "scroll"

[dt_roger]

I have a Vue app with a timeline that can be scrolled both horizontal and vertical with Draggable using type="scroll".

      Draggable.create(this.$refs.lo_sectionList, {

        type: "scroll",

        dragClickables: true,

        lockAxis: false,

        zIndexBoost: false,

        onDrag: this.onTimelineDrag,

      });

 

 

When the user clicks one of the buttons on the timeline, a new page is opened. When the user then goes back to the timeline it is positioned at the beginning, not the position it had when the user clicked the button. 

 

To fix this I am storing the scrollLeft value in a global variable when a button is clicked, but I am unable to find out how to set the timeline position when initiating the draggable.

 

Does anyone have any suggestions on how to do it?

 

 

 

[GreenSock]

Welcome to the forums, @dt_roger. 

 

It's pretty tough to understand based solely on that small snippet of code. Can you please provide a minimal demo so we can see the context? It sounds like maybe you just need to calculate the progress value based on the scrollLeft or something, and set the timeline's progress() accordingly(?)

[dt_roger]

Thank you for your answer, Jack.

 

I don't have a timeline, just the Draggable. 

 

I solved the problem by setting scrollLeft of the element after initiating Draggable. I can swear this did not work when I tried it last night, but there you go... The dangers of late night programming, I guess 🙄

 

The solution is like this (in the mounted lifecycle method)

 

 

      Draggable.create(this.$refs.lo_sectionList, {

        type: "scroll",

        dragClickables: true,

        lockAxis: false,

        zIndexBoost: false,

        onDrag: this.onTimelineDrag,

      });

    // * Set scroll left to the stored position

    this.$refs.lo_sectionList.scrollLeft = this.globalVars.timelineScroll;