progress on scrolling thing
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 17s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 17s
This commit is contained in:
parent
71ad89b197
commit
50c08b6b67
1 changed files with 37 additions and 3 deletions
|
@ -1,20 +1,54 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
||||||
|
import { browser } from '$app/environment';
|
||||||
|
import { onDestroy, onMount } from "svelte";
|
||||||
const buildTime = __BUILD_TIME__;
|
const buildTime = __BUILD_TIME__;
|
||||||
|
|
||||||
let scrollY = 0;
|
let scrollY = 0;
|
||||||
|
const unscrollSpeed = 100;
|
||||||
|
let unscrollScrollDiv: HTMLDivElement;
|
||||||
|
let totalScroll = 0;
|
||||||
|
|
||||||
|
let unscrollInterval: number |undefined = undefined;
|
||||||
|
let lastScrollTime = 0; // Used to have delay before unscrolling
|
||||||
|
const unscrollDelay = 2000;
|
||||||
|
|
||||||
|
onMount(()=>{
|
||||||
|
totalScroll = document.documentElement.scrollHeight - window.innerHeight
|
||||||
|
|
||||||
|
unscrollInterval = setInterval(() => {
|
||||||
|
console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime);
|
||||||
|
if (Date.now() < lastScrollTime - -unscrollDelay){
|
||||||
|
console.log("nah");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if(totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
|
||||||
|
window.scrollTo({ top: Math.max(scrollY - unscrollSpeed, totalScroll - unscrollScrollDiv.scrollHeight), behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
function onScroll(){
|
||||||
|
lastScrollTime = Date.now();
|
||||||
|
// console.log("scroll");
|
||||||
|
}
|
||||||
|
|
||||||
|
onDestroy(()=>{
|
||||||
|
clearInterval(unscrollInterval);
|
||||||
|
});
|
||||||
|
|
||||||
export let hideOnPrint: boolean;
|
export let hideOnPrint: boolean;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window bind:scrollY />
|
<svelte:window bind:scrollY on:scroll={()=>{onScroll();}} on:touchmove={()=>{onScroll();}}/>
|
||||||
|
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<!-- Keep scrolling thing -->
|
<!-- Keep scrolling thing -->
|
||||||
<div class="h-64 w-full">
|
<div bind:this={unscrollScrollDiv} class="h-64 w-full">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- About footer -->
|
<!-- About footer -->
|
||||||
<div class="{hideOnPrint ? 'hide-on-print' : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8">
|
<div class="{hideOnPrint ? 'hide-on-print' : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8">
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue