Is it possible to prevent the "auto scroll" to top event happening whenever you dynamically switch from overflow:hidden to overflow:auto?
Here's a demo of the issue: https://stackblitz.com/edit/angular-ivy-6v9nyc. If you scroll down to the end and click on the Toggle nested scrollbar button, you automatically get taken back to the top of the page.
I don't want this to happen. I want to remain at the same scroll position.
Here's my code:
app.component.css
.showcase-no-scrollbar {
overflow-y: hidden;
overflow-x: hidden;
}
.showcase-scrollbar {
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 115px) !important;
overscroll-behavior: none;
}
.showcase-scrollbar::-webkit-scrollbar {
width: 0.31rem;
background: #f9fbfd;
}
.showcase-scrollbar::-webkit-scrollbar-thumb {
background: #959da5 !important;
}
app.component.html
<div class="navbar">For your reading pleasure</div>
<div
class="container-fluid showcase"
[ngClass]="showScrollbar ? 'showcase-no-scrollbar' : 'showcase-scrollbar'"
>
<div class="row justify-content-between">
<div
class="col-9"
[attr.data-cy]="'showcase'"
[ngClass]="showScrollbar ? 'showcase-scrollbar' : 'showcase-no-scrollbar'"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices
tellus id magna maximus porta. Fusce pretium nibh nisl, sodales elementum
nisi tincidunt at. Maecenas est tellus, dignissim et mattis sed, dictum et
ex. Nunc purus nisl, tristique eu mi mollis, interdum pretium leo. Cras
venenatis dui at tellus porttitor, sed pulvinar nibh posuere. Duis
placerat sapien eu leo pulvinar, sit amet convallis tellus finibus. Ut et
ipsum et nibh feugiat tempor. Phasellus vehicula arcu sit amet velit
maximus, ac ullamcorper enim auctor. Praesent at condimentum nisl. Fusce
ultricies massa luctus, imperdiet erat vitae, sagittis erat. Nullam
gravida, libero a auctor condimentum, metus magna feugiat erat, eget
ullamcorper diam justo in ipsum. Mauris neque mauris, congue a
pellentesque a, molestie non turpis. Suspendisse at tincidunt libero.
Nulla vitae est commodo, sodales metus sit amet, sodales urna. Quisque ex
urna, luctus eu ultricies nec, imperdiet ac enim. Vestibulum tincidunt
rutrum mi, id pharetra nunc sodales nec. Aliquam vulputate metus eros, ac
rutrum magna venenatis id. Fusce dictum malesuada suscipit. Quisque luctus
consequat venenatis. Duis iaculis vestibulum quam. Sed cursus dolor eget
dui interdum, ac vestibulum ipsum blandit. In suscipit neque vitae
malesuada rutrum. Vivamus quis mauris mi. Nunc tristique arcu gravida
neque commodo, eu facilisis augue tempus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Nam
scelerisque nisl id est semper, vel mollis massa iaculis. Integer eu
tortor vitae nisi pharetra elementum vel eget quam. Donec facilisis, risus
et tristique sollicitudin, est est feugiat nibh, dapibus consectetur nibh
ligula eget erat. Mauris venenatis sodales lectus, id auctor ligula
posuere condimentum. Integer et nulla et enim lacinia scelerisque at in
dui. Donec nec massa nisi. Donec diam mauris, hendrerit ut sem et,
malesuada varius eros. Nam blandit tempor erat, nec congue augue
consectetur at. Nam viverra dictum elementum. Mauris malesuada ipsum eget
enim posuere, id consequat mi eleifend. Aenean feugiat diam in orci
sagittis pellentesque. Nunc gravida condimentum ipsum, a pretium erat
egestas et. Curabitur tempus convallis neque sollicitudin volutpat. Ut
lacinia, mi lobortis vehicula egestas, nibh lorem pretium odio, nec
feugiat augue turpis quis purus. Morbi maximus congue lacus, ac tempus
enim viverra ac. Ut quis efficitur dui. Suspendisse sagittis justo non
enim vulputate volutpat. Nunc sollicitudin lectus eget varius venenatis.
Morbi elementum imperdiet eros, vel suscipit ex mattis vel. Morbi ipsum
libero, iaculis vitae orci in, feugiat euismod lacus. Ut molestie et nibh
non vehicula. Mauris vitae justo risus. Nam orci mi, volutpat quis
vestibulum sed, consequat vel nibh. Mauris nec ultricies dui, eu lacinia
mi. Ut quis ex sit amet metus luctus vestibulum. Cras at accumsan mi.
Proin quis sagittis augue. Proin eget convallis est, non suscipit tortor.
Pellentesque libero purus, efficitur vel egestas vel, dictum vel eros.
<br />
<br />
<button
type="button"
class="btn btn-primary"
(click)="toggleNestedScrollbar()"
>
Toggle nested scrollbar
</button>
</div>
<div
class="col-3 showcase-course-content-sidebar"
id="shepherd-body-showcase-course-content-sidebar"
>
test
</div>
</div>
</div>