Recently, I put together a custom CSS modal that includes a scrollable div (without the modal itself being scrollable). Interestingly enough, when I initially open the modal, the scrollbar of the div starts at the top as anticipated. However, if I scroll down, close the modal, and then reopen it, the scrollbar returns to its previous position instead of resetting to the top like I would prefer.
In case you're curious, here is the CSS code for the modal:
.create-modal-content {
position: relative;
background-color: #F7F7F8;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 95%;
height: 95%;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
animation-name: createAnimation;
}
@keyframes createAnimation {
from {
right: 0;
opacity: 0
}
to {
right: 0;
opacity: 1
}
}
And here's the code snippet for the scrollable div:
.create-container {
background-color: #e7e7e7;
margin: 35px 15px 0 15px;
border-radius: 10px;
max-height: 70vh;
overflow: auto;
}
If you're interested in reviewing the complete HTML and CSS code for the modal and the div, take a look below:
<div class="create-modal-content" >
<div class="ml-12 mt-24 font-size-18 font-weight-700">Create Organization</div>
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="15px" class="pl-48 pt-12 pb-12 create-container">
<input type="file" accept="image/*" hidden #fileInput (change)="imageSelected($event )" />
</div>
<div fxLayout="column" fxLayoutAlign="end center">
<button class="mt-12 mb-12" mat-raised-button color="accent" (click)="saveOrganization()">
Edit
</button>
</div>
</div>
To tackle the issue, I tried using both querySelector and getElementByClassName in the TypeScript section below without success:
const modal = document.getElementById('organization');
modal.style.display = 'block';
const createContainer = modal.getElementsByClassName('create-container')[0];
// const createContainer = modal.querySelector(".create-container");
modal.addEventListener('click', function() {
createContainer.scrollTop = 0;
});