The vertical scroll bar on my Angular app seems to have disappeared mysteriously. I haven't made any changes to the code recently, and I'm struggling to figure out why it's missing. I've spent days trying to troubleshoot this issue with no success. I've gone through numerous similar questions on Stack Overflow and tried all the recommended solutions, but none of them seem to work. Some of the things I've attempted include:
- Commenting out CSS style sheets one by one
- Commenting out HTML files one by one
- Adding 'overflow: auto' and 'overflow-y: scroll' to various styles
- Checking for 'overflow: hidden' styles in the CSS
Here is a screenshot of the app without the scroll bar:
https://i.sstatic.net/a3bIr.jpg
Here are snippets from the global style.css file and the component stylesheet where the issue might be originating:
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
ul {
margin:0 10px 0 0;
padding:0;
}
li { list-style: none; }
.item-list-container {
column-count: 4;
column-gap: 1.1em;
margin-top: 107px;
}
.like-icon {
color: red;
position: absolute;
bottom: 420px;
}
And here is the HTML snippet from the component causing the trouble:
<ul class="container">
<li class="item-list-container oneSec">
<app-image-item
*ngFor="let imageEl of galleryList"
[image]="imageEl"
(click)="onImageSelect(imageEl)">
<div *ngIf="isLoggedIn" class="like-container">
<ion-icon class="like-icon" name="heart"></ion-icon>
</div>
</app-image-item>
</li>
</ul>
If anyone has any suggestions before I lose my mind over this, please let me know!