@Robot439

Как сделать эту «шторку» адаптивной, чтобы можно было использовать на смартфонах?

Здравствуйте!
В общем на десктопе все отлично работает, однако при адаптиве, то есть взаимодействию тачпадом, работать все перестает.
Вот ссылка на рабочий код для десктопа https://codepen.io/Icat/pen/EGXByp
ГЛАВНЫЙ ВОПРОС:
Как сделать, чтобы это корректно работало с тачпадом?
Дальше описываю как я пытался бороться с проблемой.

КАК Я ТАНЦЕВАЛ С БУБНОМ:
Попробовав сделать при помощи метода touchmove работать стало некорректно:
-"шторка" начинает сдвигаться только на определенной ширине экрана никак не привязываясь к родителю, как это было с методом mousemove
серая точка это точка указывает текущее положение "тача"
5c2390875e879859300717.png5c23909ea62de670598973.pngвот код:
$(function(){
	$(".parent").on("touchmove", function(event){
		var touch = event.originalEvent.touches[0];
		var x = touch.screenX;
		$(".two").css("width", x + 'px');
	})
});


Помучив немного гугл я понял, что это обычная проблема данного метода, и в качестве решения этой проблемы пришлось немного расширить код, однако помогло это лишь отчасти:
-все работает, но только если данная полоса занимает 100% ширины экрана. Если же есть какие-то отступы то все снова ломается:
серая точка это точка указывает текущее положение "тача"
5c23906ab54c9984161238.png5c2390735c423433319614.pngвот код:
$('.parent').bind('touchmove',function(e){
      e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      var elm = $(this).offset();
      var x = touch.pageX - elm.left;
      var y = touch.pageY - elm.top;
      if(x < $(this).width() && x > 0){
          if(y < $(this).height() && y > 0){
                $(".two").css("width", touch.pageX + 'px');
          }
      }
});


Первое сомнительное решение на огромных костылях, которое пришло в голову
т.к. точка взаимодействия с тачем отсчитывается от левой стороны самого экрана, а не родительского элемента.
как видно из скриншота ниже синяя полоска равна левому отступу.
серая точка это точка указывает текущее положение "тача"
5c23957c5a1ac909683525.png5c23958219e65552985901.png

Отсюда если взять ширину всего экрана монитора и вычесть из нее ширину всей полоски, а после разделить на два, то мы получим значение этого самого левого отступа. Далее при расчете ширины остается только из touch.pageX вычесть данное значение. Но такое решение выглядит не очень привлекательно, и мне кажется что должно быть что-то более легче..

Прошу людей с опытом, помочь решить данную головную боль.
  • Вопрос задан
  • 170 просмотров
Решения вопроса 1
@magarif
Программист
Такое?

$('.parent').bind('touchmove',function(e) {
  e.preventDefault();
  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
  var position = $(this).offset();
  var maxWidth = $(this).width();
  var x = touch.pageX - position.left;
  if (0 <= x && x <= maxWidth) $(".modal").width(x);
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы