Issue: Here is the video link to display what I mean: Issue video When the container is in not completely in viewport, if I hover between 2 list elements, the browser scrolls the page to keep image's top edge exactly where the previous ones was. (It works perfectly when container is within viewport) Setup: So I am using angular 19. I have a section where container is divided in 2 equal parts horizontally. Left container has dynamic image (width 100%, centered by flex box) Right has a list whose elements when hovered upon change the src variable used in img tag so that corresponding image is displayed. The images are all of different heights but all are less heighted than the length of list (Container height) I tried inspecting through dev tools but it didn't help I tried to asking it to ai tools but even they weren't able to figure it out Created a new project just to replicate the issue: Git Repo Link I am expecting the page to not scroll when the container is partially inside viewport and we hover on the list elements Continue reading...
