Блог

Главная - Вопросы по программированию - TouchEvents javascript jQuery

TouchEvents javascript jQuery

#jquery #events #touch

#jquery #Мероприятия #коснитесь

Вопрос:

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

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

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

 event.originalEvent.touches[0].clientY;

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

Я пробовал использовать другой 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>

Редактировать:

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