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

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

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

<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>

Спасибо.