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

Обсуждения
1

Как сделать перемещение по странице с помощью свайпов?
Вот пример:http://robinmastromarino.com/project/fanny-myard

2

Я не составил целой картины. Что понял, что похоже на кучу кастомного кода. Большая часть страницы рендерится в canvas web-gl-ем. Думаю что задачу можно решить через хитрые манипуляции позицией элементов и перехватом событий свайпинга (это и touchmove и touchstart и иже с ними)

3

Спасибо за полезный совет. Но не легче touchmove и touchstart отслеживать скролл и при каждом новом свайпе сколиты вверх или вниз например на 500px?

4

Так можно сделать и будет работать. Но последствие в том что ощущение будет не полным если нельзя будет двигать страницу, передвигая палец после старта движения. Конечное решение зависит от комбинации факторов что примет заказчик, что ты можешь/успеешь сделать.

Еще куча нюансов может вылезти: типа snapping-point - после какого движения считать что нужно скроллить вперед, а когда считать что скроллить не нужно. Эти нюансы я бы выписал, пользуясь уже готовой реализацией.

5

Ок, спасибо

6

Здесь есть одна проблема. Событие срабатывает только на телефонах.

7

Да, touch события нужно дублировать как mouse down mouse move если хочешь того же поведения на десктопе

8

Не очень понял, можете показать в виде кода?

9

https://jsfiddle.net/08at59fu/3/

Чтобы четко работало, нужно отменять больше других событий (страница все еще скроллится на мобильнике). Не стал разбираться. Для демонстрации другой идеи достаточно.

Тыкни в красное и начни вести. В красный блок будут выводиться координаты куда пошел палец/курсор после тыка. Работает на десктопе и на мобильнике.

И конечно-же так код писать не надо, тут главное уловить концепт.

$('.target').on('touchstart mousedown', () => {
	$(document).on('touchmove mousemove', (event) => {
  	event.preventDefault()
		$('.target').text(event.pageX + '-' + event.pageY)
	})
	$(document).on('touchend mouseup', (event) => {
		$(document).off('touchmove mousemove')
	})
})
10

https://codepen.io/marki1404/pen/OYzXVX
Переменная свайпов равна скроллу боди, в чем проблема?
Почему боди не скролиться?

11 
var scroll    = $("body").scrollTop();
  scroll        = positionY;

js та не работает. Тебе нужно взять данные из positionY и вызвать метод, который проскроллит на некоторое количество.

Вот “примерный” код чтобы показать идею: https://codepen.io/anon/pen/rgpMRM

12

Ок, спасибо за пример, я почти все понял, но можно при меньшем свайпе скроллить страницу больше. Я имею в виду к каждому свайпу вниз или вверх, добавлять например 500px

13

Да. Это уже тебе рассчитывать куда и как просктроллить страницу.

15

И еще, почему в вашем примере скролл очень медленно и трудно идет вверх, а вниз легко?

16

Потому что нужна другая логика на сколько скроллить страницу. Я скролю на откровенно случайное значение. Если использовать scrollTop, то в формуле на сколько скроллить, нужно учитывать текущее значение на сколько уже страница проскроленна

17

https://codepen.io/marki1404/pen/BeJpoL
Примерно вот так? Но тогда скролл будет только вниз.

18

Попробуй найти api (возможно scrollTop тоже сработает) которое позволяет скроллить в любую сторону. Пиши формулу на сколько скроллить - и будет в обе стороны.

Если это попытка сделать работающий вариант из моего примера - это гиблый путь. Мой пример чисто для демонстрации механики. Конечное решение должно быть более продуманным и стуктурированным.

19

Не совсем понятно …

20

Например запоминай точку при touchstart, смотри если touchmove влево от нее, то формула, что напишешь, будет выдавать отрицательное значение на сколько скроллить, если вправо - положительное. Я предполагаю что api на сколько скроллить требует отрицателных значений чтобы скроллить вверх и положительных чтобы вниз.

21

Суть я понял. Но не до конца понятно с написанием. Можете пожалуйста скинуть пример?