0
170
ViewsUsing pure javaScript without "onMount" in Sveltekit framework
Is there a way to using simple JavaScript without using onMount ?
How to improve this code and don't use onMount?
(I'd like to shoe each content box after user scrolls)
<script>
import { onMount } from 'svelte';
onMount(() => {
const boxes = document.querySelectorAll('.content');
window.addEventListener('scroll', checkBoxes);
checkBoxes();
function checkBoxes() {
const triggerBottom = (window.innerHeight / 5) * 4;
boxes.forEach((box) => {
const boxTop = box.getBoundingClientRect().top;
if (boxTop < triggerBottom) {
box.classList.add('show');
} else {
box.classList.remove('show');
}
});
}
});
</script>
·
Juan Pablo Isaza
2 answers
Answer question0
Assuming your content boxes are generated in an array you could use a combination of bind:this and svelte:window
<script>
let boxes = [];
let content = [];
function checkBoxes() {
// use boxes here
}
</script>
<svelte:window on:scroll={checkBoxes} />
{#each content as c, i}
<div bind:this={boxes[i]}>
....
</div>
{/each}
Alternatively, look into actions and IntersectionObservers
·
Juan Pablo Isaza
Report
0
How about -
document.addEventListener("DOMContentLoaded", function(){
// your code here will be executed on page ready/load
});
·
Juan Pablo Isaza
Report
Answer question