Как сделать прокрутку левого меню при помощи translate на мобильных?

Question

[superproger]

Чтоб лучше понять меня, зайдите на сайт m.sports.ru через хром с помощью режима просмотра с мобильного, выбрав любой мобильный, и откройте правое меню, когда его скроллишь, изменяется translate, как я понял никакого overflow, как реализовать подобное? Google не помог ничем особо(

Answer 1

[Алексей A]

Тут всё реализовано как обычный drag and drop на сенсорных устройствах.
1. С помощью JS (touchstart) определяем стартовые координаты нажатия. Так как присутствует transition: transform 300ms ease то убираем его (чтобы не глючило при перемещении).
2. touchmove отслеживает изменение положения и одновременно записывает изменения в стили меню

document.querySelector('#myMenu').style.transform = "translate("+x+"px,"+y+"px)";

3. touchend определяет координаты, где "отпустили палец" и сравнивает со стартовой позицией (или, условно, translateX < 0, как на том сайте) и принимает решение, что делать. Если отключалась анимация (см. п.1.) тогда она возвращается и элемент снова плавно передвигается.

Comments

[superproger]

насчет первого пункта, не совсем понял "определяем стартовые координаты нажатия" это как?

[Алексей A]

superproger: Есть переменная (область видимости должна быть за пределами функции, вызываемой touchstart), скажем, var coord = {x: 0, y: 0}; и при нажатии берём событие и смотрим координаты нажатия (например, e.touches[0].clientX) и записывем в переменную coord.x = e.touches[0].clientX;

[superproger]

Алексей A:

var menu1 = document.getElementsByClassName("left-menu")[0];
	  menu1.addEventListener('touchstart', function(e){
	    var coord = {x: 0, y: 0};
        
            coord.x = e.touches[0].clientX;
	    coord.y = e.touches[0].clientY; 
	  }, false);
	  alert(coord.x);
	  menu1.addEventListener('touchmove', function(e){
         menu1.style.transform = "translate(0, "+y+"px)";
	  }, false);
	  
	  menu1.addEventListener('touchend', function(e){
	      menu1.removeEventListener('touchstart', 'touchmove');
	  }, false);

Вот как я прописываю для своего левого меню на сайте, не натолкнёте что дальше делать? Пока честно говоря не особо понимаю, выдает "y is not defined" когда пытаюсь скроллить меню.

[superproger]

superproger: alert для себя писал, если что

[Алексей A]

superproger: codepen.io/anon/pen/qZXypj

[superproger]

Алексей A: вау! Получилось действительно круто!) Огромное спасибо) Только пару нюансов осталось, я думал разберусь, но что-то не получается( Первое: я убрал при touchend когда перетянул, чтобы возвращалось. Второе: нужно чтобы меню прокручивалось в определенных пределах, тоесть допустим его длина 300px(чисто к примеру), а длина экрана в гориз. положении 250 и нужно чтоб меню только скроллилось на 50 вниз и не больше, только как бы это провернуть адаптивно для всех экранов?