Draggable how to set width manually

[LucitheR]

Hi there,

 

Draggable constructs a div around the content of my Element(s). 

One of those changes the width while dragging horizontal. i know the end position of that element before creation of the Draggable. 

how can i set the width of the draggable div during creation (i presume 'padding-right' ?), to avoid empty space at the drag end?

 

 

<div id="scroll__window" class="scroll__window" style="overflow-x: auto; overflow-y: hidden; cursor: move; touch-action: pan-y; user-select: none;">
<!-- // injected by draggable this padding-right needs to be set manually -->
<div style="display: block; width: 100%; padding-right: 18836px; position: relative; overflow: visible; vertical-align: top; transform: translate3d(0px, 0px, 0px);">

          <div class="stories__wrapper">
        	<div class="stories__container"> 
        	<!-- Stuff -->	
            </div>
            <div id="scroll__container" class="scroll__container">
              <!-- even MORE Stuff  absolute positioned & parallax -->	
            </div>
          </div>

      </div>
      
</div>

 

(Sorry have not the time for a codepen ) 

 

maybe there is a simple answer, i'm not yet aware of?

 

 

  

[GreenSock]

I don't quite understand the question. It'd be super helpful if you provided a codepen that demonstrates the issue so we can poke around and see what's going on. We'd love to help. 

[LucitheR]

Hi Jack thanks for the Reply,

 

we are currently building a horizontal website with a parallax (3 layers) in it, these layers are completely under control of the customer , so we don't know how long these are, what is on them, etc. (i have no permission to share any more code)

 

When you scroll/drag to the end you have massive amount of emptiness (since all layers moved to the left), so i needed to cut it after the last visible element. I calculated the width the page will have after animations and dragging. 

 

My question was how to override the padding  that will be set in the calibrate function (line ~1039) of Draggable.js  and here:

 

	extraPadRight = Math.max(0, element.scrollWidth - element.clientWidth);

 

 

 

i know this is not a normal use case  but i thought i ask for any un(der) documented feature before

i start to hack Draggable.js  (hacking it is evil, dirty and really ugly)

 

i think it would be nice to have a feature to set a custom width to the draggable container when creating the Draggable or in scrollProxy.

 

i will provide a link to the site when it's live.

 

 

Cheers, Jan

 

 

 

[GreenSock]

Yeah, definitely seems like quite an edge case and I'm a bit reluctant to expand the API to accommodate it, but couldn't you set it to whatever you want manually via draggableInstance.scrollProxy.element.style.paddingRight?