Scroll jumping back when hitting the bottom of the page - html

Question

I have a home component in Angular with 2 sections: one with a Bootstrap 5 carousel and the second one with some dummy headings for demo purposes. On a single scroll, I'm able to snap from one section to another.
However, there's a problem when trying to scroll to the bottom of the page as the scroll jumps a few pixels back, therefore not allowing me to see the last few dummy headings. I've managed to find a hardcoded solution (the footer-space div), but I was wondering if there's anything else I could do in this case. I feel I'm missing something, but I don't know exactly what.
img {
height: 84vh;
}
.scroller {
height: 91vh;
overflow-y:scroll;
scroll-snap-type: y mandatory;
}
.scroller section {
scroll-snap-align: start;
}
/* laptop */
#media only screen and (max-width: 1920px) {
.footer-spacer {
height: 8.96vh;
}
}
/* monitor */
#media only screen and (min-width: 1920px) {
.footer-spacer {
height: 4.74vh;
}
}
<section class="scroller">
<section>
<div
id="carouselDark"
class="carousel carousel-dark slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="3"
aria-label="Slide 4"
></button>
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="4"
aria-label="Slide 5"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="3000">
<img
src="../../assets/undraw_travelers.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img
src="../../assets/undraw_investment_data.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img
src="../../assets/undraw_stranded_traveler.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img
src="../../assets/undraw_savings.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Fourth slide label</h5>
<p>Some representative placeholder content for the fourth slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img
src="../../assets/undraw_world.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Fifth slide label</h5>
<p>Some representative placeholder content for the fifth slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselDark"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselDark"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: blue">test</h1>
<h1 style="color: red;">test</h1>
<!-- preventing the scroll to jump back when hitting the bottom of the page -->
<!-- <div class="footer-spacer"></div> -->
</section>
</section>