Posts

Showing posts with the label Svelte

Fix: Prevent overscroll/overflow in Skeleton UI Modal component

 To prevent overscroll or overflow in a Skeleton UI modal component, you can use CSS to control the scrolling behavior of the modal. Here are a few strategies you can employ: 1. **Hidden Overflow:**    One common approach is to set `overflow: hidden` on the modal's content container. This prevents the content from scrolling. This approach is suitable for a simple modal with static content.    ```css    .modal-content {        overflow: hidden;    }    ``` 2. **Fixed Position:**    You can use `position: fixed` to make the modal stick to the viewport and avoid scrolling. This approach is useful for small modals or overlays.    ```css    .modal {        position: fixed;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);    }    ``` 3. **Fixed Body:**    In some cases, you may want to prevent the entire page from scrolling when the modal is open. To achieve this, apply `position: fixed` to the `body` element when the modal is open and restore the original posi