TouchEvents javascript jQuery

Question

Я делал панель прокручиваемых элементов для мобильного макета, но, похоже, он сбрасывал калькуляцию случайно, не зная почему. Например, если вы проверите и установите адаптивный макет в Chrome, вы увидите, что иногда действие перетаскивания вправо заставляет элементы перемещаться влево, а иногда вправо и наоборот.

Предполагается, что он принимает только значения горизонтального перетаскивания / сенсорной прокрутки (ось Y) и работает нормально или плохо в случайном порядке. Я пытался утешить журнал значений, но не могу найти шаблон, который вызывает этот сбой.

Может быть, другой способ сделать:

event.originalEvent.touches[0].clientY;

попробовал один скрипт из поста, но все тот же.

Я пробовал с другим calc для получения одинаковых значений перетаскиваемого расстояния, но результат тот же. Не можете выяснить причину, какой-либо совет / решение?

Я снимаю рабочий фрагмент.

Спасибо

$(".flexbox-subcategory").on('touchstart', function(event) {
        // Getting the touchStart position.
        var touchStart = event.originalEvent.touches[0].clientY;
        var touchDistance = 0;
        var scrollDistance = 0;
        var actual = 0;

        // scroll bounds
        let min = 0;
        let max = -10;
        $('.flexbox-subcategory>.flexbox-subcategory-item').each( function(){ min += $(this).width(); });
        min = (min - 110) * -1;

        function touchMove(event) {
            // Dragged zone distance (width) calc:
            touchDistance = touchStart - event.originalEvent.touches[0].clientY;
            // check actual left value
            actual = parseInt($(this).css('left').replace('px', ''));
            // set calc for new scroll value
            scrollDistance = actual + touchDistance;

            // Avoid scroll out of bounds
            if (scrollDistance > max) scrollDistance = max;
            if (scrollDistance < min) scrollDistance = min;
            // apply left value to emulate scroll
            $(this).css('left', scrollDistance);
        }

        $(this).on('touchmove', touchMove).one('touchend', function () {
            // turns off touchmove listener once
            $(this).off('touchmove', touchMove);
        });
    });

.flex-wrap{
  width: 75%;
  overflow: hidden;
  }
  
  
.flexbox-subcategory{
  display: flex;
  width: 100%;
  position: relative;
  left: 0px;
  }
  
 .flexbox-subcategory-item{
  display: flex;
  border: 1px solid #333;
  margin: 15px;
  padding: 15px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="flex-wrap listingSubCategories">
    <div class="homepageListing flexbox-subcategory">
      <div class="flexbox-subcategory-item">
          <a class="pretty-link" href="#">
              <div class="categoryBlock">
                  <div class="box-image">
                      image
                  </div>
                  <div class="box-title">
                      <h3>text</h3>
                  </div>
              </div>
          </a>
      </div>
      <div class="flexbox-subcategory-item">
          <a class="pretty-link" href="#">
              <div class="categoryBlock">
                  <div class="box-image">
                      image
                  </div>
                  <div class="box-title">
                      <h3>text</h3>
                  </div>
              </div>
          </a>
      </div>
      <div class="flexbox-subcategory-item">
          <a class="pretty-link" href="#">
              <div class="categoryBlock">
                  <div class="box-image">
                      image
                  </div>
                  <div class="box-title">
                      <h3>text</h3>
                  </div>
              </div>
          </a>
      </div>
      <div class="flexbox-subcategory-item">
          <a class="pretty-link" href="#">
              <div class="categoryBlock">
                  <div class="box-image">
                      image
                  </div>
                  <div class="box-title">
                      <h3>text</h3>
                  </div>
              </div>
          </a>
      </div>
      <div class="flexbox-subcategory-item">
          <a class="pretty-link" href="#">
              <div class="categoryBlock">
                  <div class="box-image">
                      image
                  </div>
                  <div class="box-title">
                      <h3>text</h3>
                  </div>
              </div>
          </a>
      </div>
      <div class="flexbox-subcategory-item">
          <a class="pretty-link" href="#">
              <div class="categoryBlock">
                  <div class="box-image">
                      image
                  </div>
                  <div class="box-title">
                      <h3>text</h3>
                  </div>
              </div>
          </a>
      </div>
      <div class="flexbox-subcategory-item">
          <a class="pretty-link" href="#">
              <div class="categoryBlock">
                  <div class="box-image">
                      image
                  </div>
                  <div class="box-title">
                      <h3>text</h3>
                  </div>
              </div>
          </a>
      </div>
      <div class="flexbox-subcategory-item">
          <a class="pretty-link" href="#">
              <div class="categoryBlock">
                  <div class="box-image">
                      image
                  </div>
                  <div class="box-title">
                      <h3>text</h3>
                  </div>
              </div>
          </a>
      </div>
      <div class="flexbox-subcategory-item">
          <a class="pretty-link" href="#">
              <div class="categoryBlock">
                  <div class="box-image">
                      image
                  </div>
                  <div class="box-title">
                      <h3>text</h3>
                  </div>
              </div>
          </a>
      </div>
  </div>
</div>

EDIT:

Я попытаюсь узнать, является ли направление пролистывания левым или правым, и ограничу калькуляцию этим значением. Это патч, а не решение, но ...