Assuming we scroll 3 divs in a div.

Using scroll-snap-... we can “animate” the alignment of that scroll.

div{
  width:100px;
  height:100px;
  white-space:nowrap;
  overflow:auto;
  display:inline-block;
  scroll-snap-align: center;
  scroll-snap-type: x mandatory;
}

.red{background:red;}
.green{background:green;}
.blue{background:blue;}

<div class=viewport onscrollend=console.log(event)>
   <div class=red>»</div>
   <div class=green>»</div>
   <div class=blue>»</div>

During release the scroll-wheel (or the finger on a mobil phone accordingly) the end-scroll-event fire twice.

1. It fires that the user-interaction has ended.
2. It fires when the alignment-animation finished.

Between both events the scrolling is animated (hopefully) within a fraction of a second.

I like to handle the second event only but I can not see any difference between those two event-objects.

How to do differ programmatically between those two events?