diff --git a/package.json b/package.json index f68dd24..6ca91d5 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ }, "type": "module", "dependencies": { + "gsap": "^3.12.5", "md-block": "^0.0.1", "svelte-material-icons": "^3.0.5", "svelte-transition": "^0.0.10" diff --git a/src/lib/index.ts b/src/lib/index.ts index 4905f7d..16fc791 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -2,19 +2,50 @@ import { goto } from '$app/navigation'; +import { gsap } from 'gsap'; +import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin'; + +// export function smoothScrollTo(elementId: string) { +// const element = document.getElementById(elementId); +// if (element) { +// element.scrollIntoView({ +// behavior: 'smooth' +// }); +// } +// } + export function smoothScrollTo(elementId: string) { + gsap.registerPlugin(ScrollToPlugin); const element = document.getElementById(elementId); - if (element) { - element.scrollIntoView({ - behavior: 'smooth' - }); - } + if (!element) return; + + // Function to disable scrolling + const disableScroll = (event: Event) => event.preventDefault(); + + // Disable scrolling through various events + window.addEventListener('wheel', disableScroll, { passive: false }); + window.addEventListener('touchmove', disableScroll, { passive: false }); + window.addEventListener('keydown', (event) => { + // Prevent scrolling through spacebar, arrow keys, page up/down + if (['Space', 'PageUp', 'PageDown', 'ArrowUp', 'ArrowDown'].includes(event.code)) { + event.preventDefault(); + } + }, { passive: false }); + + gsap.to(window, { + scrollTo: { y: element, autoKill: false }, + duration: 0.1, + ease: "power4.out", + onComplete: () => { + // Re-enable scrolling after animation + window.removeEventListener('wheel', disableScroll); + window.removeEventListener('touchmove', disableScroll); + window.removeEventListener('keydown', disableScroll); + } + }); } -// export function redirectToHome() { -// // goto('/'); -// smoothScrollTo('home'); -// } + export function handleKeydown(event: KeyboardEvent) { // Trigger redirection on Enter key or Space bar diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 183aefd..897d966 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,9 +1,39 @@ @@ -16,4 +46,4 @@ \ No newline at end of file + diff --git a/src/styles/index.scss b/src/styles/index.scss index 0501abb..017ad2b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,8 +2,8 @@ .container { height: 100vh; width: 100%; - scroll-snap-type: y mandatory; - overflow-y: scroll; + // scroll-snap-type: y mandatory; + // overflow-y: scroll; } .section { diff --git a/yarn.lock b/yarn.lock index 635ab42..b38a064 100644 --- a/yarn.lock +++ b/yarn.lock @@ -934,6 +934,11 @@ graphemer@^1.4.0: resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6" integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag== +gsap@^3.12.5: + version "3.12.5" + resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.12.5.tgz#136c02dad4c673b441bdb1ca00104bfcb4eae7f4" + integrity sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ== + has-flag@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"