Как правильно реализовать следующую логику на событии scroll?

[s24344]

Здравствуйте. Подскажите, пожалуйста, как правильно реализовать следующую логику: На контейнере есть возможность горизонтального скролла. Как тольео я начал кролить слева напрво, у меня сработала функция (например console.log('left right start')). Как только я доскролил слева направо до конца, сработала функция console.log('left right finish'). Начал скролить справа на лево console.log(right left start). Доскролил справа на лево до конца, сработала функция console.log('right left finish').

[j0hnik]

Давненько вы уже тут, пора бы освоить такие простые вещи

<style>
    #scr {
      width: 400px;
      border: 1px solid red;
      overflow-y: scroll;
    }

    #scr>div {
      width: 1500px;
      height: 10px;
    }
  </style>

<div id="scr">
  <div></div>
</div>
 
  <script>
    var x = 0;
    scr.onscroll = e =>{
      if(x < scr.scrollLeft) console.log('left right start');
      if(x > scr.scrollLeft) console.log('right left start');
      if(scr.scrollLeft + scr.clientWidth + 1 >= scr.scrollWidth) console.log('left right finish');
      if(scr.scrollLeft === 0) console.log('right left finish');
      x = scr.scrollLeft;
    };

  </script>

[s24344]

Спасибо.