In my socket event, I am using $scope.items.unshift(item) to place the new item at the top of the list.
The html code includes
<ol ng-repeat="item in items"><li>{{item.name}}</li></ol>An issue arises when a new item is added while the user is scrolled down on the list.
ol { overflow-y: auto; max-height: 100px; }
This causes the scroll position to change and disrupts the reading experience for the user. If they are halfway through an item, it jumps out of view or shifts down the page.
I am working on dynamically adding items to the list without affecting the scrollbar position. My goal is to keep the current scroll position fixed even as new items are added to the top of the list.