search

haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.77k stars 643 forks source link

When I use the layout horizontal option with the dragAutoScroll property, infinite scrolling occurs horizontally when attempting to drag. #539

Closed jiniC closed 1 year ago

jiniC commented 1 year ago

Hello! I have posted many questions in the past, and I was very grateful for your quick and kind response. It's late, but I'd like to think about the issue(https://github.com/haltu/muuri/issues/509) with you if I have time. 🧐

But before that, I'm leaving a question because I'm having a problem during another test. I used the layout horizontal option because I want a horizontal scroll. Also, I used the dragAutoScroll property because I wanted the horizontal scroll to work automatically when dragging. However, if I set the targets attribute value to window, horizontal scroll works, but there is a problem that the scroll moves indefinitely as shown in the video below. How can I solve this situation?

https://user-images.githubusercontent.com/13125662/208871134-41f80bc1-93e2-40ef-8d50-48218c97df7f.mp4

The link below is the code being tested. https://codepen.io/jiniC/pen/VwBYyva

Just in case, I tested the .drag-container with the same right value as the width value of the murri area, but it also failed. 😢

jiniC commented 1 year ago

I omitted adding dragContainer property when creating the second Murri object. It was confirmed that it worked well. It's the best library ever! 👍

niklasramo commented 1 year ago

@jiniC Glad yot got this sorted out on your own :) But yeah, the issue is that the dragged element will extend the scroll area of the window when you drag it past it's boundaries and there's no easy way for Muuri to automatically prevent that. So the simplest way to fix that is indeed use a drag container that contains the dragged element and preventing it from extending the window's scroll area.