cuire / svelte-grid-extended

A draggable and resizable grid layout, for Svelte
https://svelte-grid-extended.vercel.app
MIT License
74 stars 8 forks source link

Page scrolls to top when dragging or resizing #48

Closed sebajans closed 10 months ago

sebajans commented 10 months ago

Hey, as the title states i am struggling with this currently. I have a static grid and when resizing the item the page scrolls to the top of the page immediately. What could cause this?

This is my general setup: Main component: `<Grid rows={20} cols={10} gap={8} class="w-full h-full grid-container z-10" bind:controller={gridController}

{#each items as item, id} <GridTypeItem {item} /> {/each} `

GridTypeItem component (simplified): Script: `function moveStart() { console.log("moveStart"); document.body.classList.add("disable-selection"); }

function moveEnd() { console.log("moveEnd"); document.body.classList.remove("disable-selection"); }`

`<GridItem class="grid-item hover:bg-black/10 transition-colors rounded-md hover:dark:bg-slate-100/10" id={item.id.toString()} bind:x={item.x} bind:y={item.y} bind:w={item.w} bind:h={item.h} on:previewchange={moveStart} on:change={moveEnd} previewClass="bg-black/20 rounded-md"

  • Commented content - `

Is there anything known that could cause this?

cuire commented 10 months ago

It's easy to fix, ill send a pr. https://svelte.dev/repl/1fb651f9c29f46bd9625c3a569ae660c?version=4.2.1

sebajans commented 10 months ago

Hey, I tried your PR but i am experiencing the same issue both on chrome and on safari. I'm using a trackpad (macbook), in case that might help. I also tried it on an iphone and that also shows the same behaviour.

Can you make a suggestion as to what your proposed fix would be? The min-height doesn't do the trick.

cuire commented 10 months ago

I am not able to quickly fix this problem, so I decided to remove the scroll. It causes too many problems