Как исправить прокрутку для моментального выравнивания при наличии элементов управления орбитой? ⇐ CSS
-
Anonymous
Как исправить прокрутку для моментального выравнивания при наличии элементов управления орбитой?
Я пытаюсь создать веб-сайт на Three.js и хочу, чтобы страница прокручивалась до начала страницы, но поскольку у меня есть элементы управления орбитой, прокрутка на сенсорных устройствах не работает, поэтому я придумал
document.addEventListener('touchmove', function (e) { е.preventDefault(); }, {пассив: ложь}); document.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchmove', handleTouchMove, false); вар xDown = ноль; вар yDown = ноль; функция getTouches(evt) { вернуть evt.touches || // API браузера evt.originalEvent.touches; // jQuery } функция handleTouchStart(evt) { const firstTouch = getTouches(evt)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }; функция handleTouchMove(evt) { если ( ! xDown || ! yDown ) { возвращаться; } вар xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; вар xDiff = xDown - xUp; вар yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*наиболее значимое*/ если ( xDiff > 0 ) { /* свайп вправо */ } еще { /* свайп влево */ } } еще { если ( yDiff > 0 ) { console.log('Проведите пальцем вверх'); окно.прокрутка({ вверху: window.scrollY + window.innerHeight, поведение: «гладкое», }); } еще { console.log('Проведите пальцем вниз'); /* пролистывание вверх */ окно.прокрутка({ вверху: window.scrollY - window.innerHeight, поведение: «гладкое», }); } } /* сброс значений */ хВниз = ноль; yDown = ноль; }; и это работало хорошо, пока я не попытался сделать его привязкой и к не сенсорному управлению, и использовал это, чтобы оно перестало работать, оно регистрирует его, но не прокручивает
.containerMain { переполнение-y: прокрутка; тип прокрутки-привязки: y обязателен; переполнение-х: скрыто; положение: относительное; высота: 100вх; } .слайды { ширина: 100vw; высота: 100вх; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; прокрутка-привязка-выравнивание: начало; положение: относительное; } Я был бы признателен, если бы они нашли какое-нибудь решение или если с моим кодом что-то не так заранее спасибо.
Я пытаюсь создать веб-сайт на Three.js и хочу, чтобы страница прокручивалась до начала страницы, но поскольку у меня есть элементы управления орбитой, прокрутка на сенсорных устройствах не работает, поэтому я придумал
document.addEventListener('touchmove', function (e) { е.preventDefault(); }, {пассив: ложь}); document.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchmove', handleTouchMove, false); вар xDown = ноль; вар yDown = ноль; функция getTouches(evt) { вернуть evt.touches || // API браузера evt.originalEvent.touches; // jQuery } функция handleTouchStart(evt) { const firstTouch = getTouches(evt)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }; функция handleTouchMove(evt) { если ( ! xDown || ! yDown ) { возвращаться; } вар xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; вар xDiff = xDown - xUp; вар yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*наиболее значимое*/ если ( xDiff > 0 ) { /* свайп вправо */ } еще { /* свайп влево */ } } еще { если ( yDiff > 0 ) { console.log('Проведите пальцем вверх'); окно.прокрутка({ вверху: window.scrollY + window.innerHeight, поведение: «гладкое», }); } еще { console.log('Проведите пальцем вниз'); /* пролистывание вверх */ окно.прокрутка({ вверху: window.scrollY - window.innerHeight, поведение: «гладкое», }); } } /* сброс значений */ хВниз = ноль; yDown = ноль; }; и это работало хорошо, пока я не попытался сделать его привязкой и к не сенсорному управлению, и использовал это, чтобы оно перестало работать, оно регистрирует его, но не прокручивает
.containerMain { переполнение-y: прокрутка; тип прокрутки-привязки: y обязателен; переполнение-х: скрыто; положение: относительное; высота: 100вх; } .слайды { ширина: 100vw; высота: 100вх; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; прокрутка-привязка-выравнивание: начало; положение: относительное; } Я был бы признателен, если бы они нашли какое-нибудь решение или если с моим кодом что-то не так заранее спасибо.
Мобильная версия