Как сделать перемещение по странице с помощью свайпов?

Обсуждения
22

Нет. Я готовые решения не даю, только помогаю разобраться в вопросе.

23

Ок, попробую сам

24

Это правильные формулы скролл вверх и вниз?
scrollTop: scroll + positionY + 500 + 'px'
scrollTop: scroll - positionY - 500 - 'px'
Здесь скролл будет увеличиваться или уменьшаться на 500px

25

Не могу сказать. Работает как тебе хотелось бы?

26

Должно работать, но как отслеживать свайп вниз и свайп вверх?
mousedown и mouseup?

27

Свайп вниз означает что

  1. произошел mousedown
  2. mousemove произошел в некоторую сторону (тут нужна формула, функция от координат движения и координат mousedown)
  3. mouseup произошел в некоторое небольшое значение времени после последрего mousemove

Кстати, поищи библиотеку для регистрации обработчиков для свайпов. Должны быть готовые решения.

28

https://jsfiddle.net/web3r/auLszh9f/?utm_source=website&utm_medium=embed&utm_campaign=auLszh9f
Нашел что-то, но не знаю поможет ли мне.

29

Это невнятная самописаная колбаса. Тебе нужен популярный проект с гитхаба. Типа

https://hammerjs.github.io/

30

https://codepen.io/marki1404/pen/Ezobjd
Почему-то не работает.

31

Функция не вызвана. Не спеши спрашивать пока все доступные варианты проблем не проверены.

32

У меня появилась идея, если обрабатывать нажатия и отпускания мышки, а затем сравнивать их с позицией мышки. Например, если нажатия = 500px а отпуск 600px тогда свайп будет вниз.

1 лайк
33

Вот пример: https://codepen.io/marki1404/pen/Ezobjd
Но здесь есть ошибки, не понимаю в чем проблема?

34

У страницы нет скролла, поэтому код и не может проскроллить (работает ли он - не проверял).

36

Скролл уже есть, но выбивает ошибку.
https://codepen.io/marki1404/pen/Ezobjd
Не понимаю, в чем проблема?

37

А что говорит ошибка? Как ты ее понимаешь?

39

Хмм … Странно. Я поработал над ошибками, теперь их нет, но код все равно не работает.
https://codepen.io/marki1404/pen/Ezobjd
Почему я не могу получить размещения курсора, и вместо этих данных, undefined.

40

Значит у объекта события нет того свойства, которое ты берёшь. Посмотри какие есть, например залогировав console.dir(e)

41

залогировав, теперь в консоли большой список, но пока не понимаю, как это мне поможет.
https://codepen.io/marki1404/pen/Ezobjd

42

Это все свойства что есть в объекте. По названию можно прикинуть какие могут быть полез в решении задачи, и погуглить на сколько они стандартные/кроссбраузерные

43

Я немного работал над кодом, и пришел к такому результату: https://codepen.io/marki1404/pen/xNYWoo
Но есть только одна проблема, в консоли все хорошо, но скролла нет.