How to pull the block to the top of the page?

Question

JavaScript

Hello. I have a site in 6 blocks of different heights, that is, they are larger than the visible height of the screen. The task is that if, for example, a piece of the 2nd block appears on the screen, then scroll it to the top of the page, and so on from 3m, 4m. This should work both top-down and bottom-up. Like a block appeared in the viewport, pulled it to the top. I tried in different ways, for example, through HostBinding, but it constantly scroll binds, tried through directives from the net, tried to set ng-in-viewport lib, but it also behaves strangely. The problem is that I find when the element appears in the viewport, but how to stop it so that the scroll event trigger does not constantly occur

Answer 1

If I understood you correctly, the problem is that the scroll event fires for you even when the element is already on the screen, and you want it to work only when it first appears.
Try https://developer.mozilla.org/ru/docs/Web/API/Inte...
It allows you to track the appearance of elements on the screen, including their current position (isIntersecting property). Using this flag you can set when you want to scroll.