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>

编辑：

我将尝试知道滑动方向是从左还是向右，并使用此值限制计算。这是一个补丁，不是解决方案，但是...