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">
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
||||
import { browser } from '$app/environment';
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
const buildTime = __BUILD_TIME__;
|
||||
|
||||
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;
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY />
|
||||
<svelte:window bind:scrollY on:scroll={()=>{onScroll();}} on:touchmove={()=>{onScroll();}}/>
|
||||
|
||||
<div class="w-full">
|
||||
<!-- Keep scrolling thing -->
|
||||
<div class="h-64 w-full">
|
||||
|
||||
<div bind:this={unscrollScrollDiv} class="h-64 w-full">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 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="flex justify-center">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue