Intersection Observer whenever a section is partially in view scroll smoothly to bottom of section - intersection-observer

Question

I am trying to create something like the fullpage.js effect.
vertical slider on scrolling for a small amount
I use Intersection Observer but any solution could help
when threshold: 0.5, go to the bottom of the section, or show the whole section in view.
https://codepen.io/Safaa_alnabhan/pen/OJOQWmX
<div class="slider">
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
</div>
<style>
.slider {
height: 100vh;
overflow-x:hidden;
overflow-y:scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.slider::-webkit-scrollbar {
display: none;
}
.slide1 {
height: 100vh;
background:red;
}
.slide2 {
height: 100vh;
background:green;
}
.slide3 {
height: 100vh;
background:blue;
}
</style>
<script>
const slide1 = document.querySelector('.slide1');
const slide2 = document.querySelector('.slide2');
const slide3 = document.querySelector('.slide3');
const sliders = document.querySelectorAll('.slider');
const options = {
threshold: 0.5,
}
const callback = (entries) => {
for(const entry of entries) {
if (entry.isIntersecting) {
entry.target.scrollBy(0, 300);
}
}
};
const observer = new IntersectionObserver(callback, options);
sliders.forEach(slider => observer.observe(slider));
</script>