stillmaster
Участник
- Регистрация
- 18 Авг 2022
- Сообщения
- 235
- Реакции
- 106
В общем сделал на сайте прокручиваемые горизонтальные скрулы которые можно двигать с помощью мыши.
Во всех браузерах работает, но почему то в мозиле немного не так как хотелось бы работает, мышка просто прилипает к объекту и двигается без кнопки.
А еще ссылки срабатывают только после второго нажатия, кто может подсказать что не так. Не знаю можно ли тут адрес сайта оставлять.
JavaScript:
const slider = document.querySelectorAll('.scroll');
let isDown = false;
let isMove = false; // Переменная, отвечающаяя за состояние свайпа
let startX;
let scrollLeft;
slider.forEach(el => {
el.addEventListener('mousedown', (e) => {
isDown = true;
el.classList.add('active');
startX = e.pageX - el.offsetLeft;
scrollLeft = el.scrollLeft;
});
el.addEventListener('mouseleave', () => {
isDown = false;
el.classList.remove('active');
});
el.addEventListener('mouseup', () => {
isDown = false;
//Если отжали ЛКМ, то свайп закончен.
//Но не сразу, чтобы не стриггерить клик в момент, когда переменная станет false
setTimeout(() => {
isMove = false;
}, 0.1);
el.classList.remove('active');
});
el.addEventListener('mousemove', (e) => {
if (!isDown) return;
isMove = true; // Меняем переменную
e.preventDefault();
const x = e.pageX - el.offsetLeft;
const walk = (x - startX) * 1; //scroll-fast
el.scrollLeft = scrollLeft - walk;
// console.log(walk);
});
});
//Блокируем все ссылки, если свайпаем
const links = document.querySelectorAll('.slider a');
links.forEach(el => {
el.addEventListener('click', (e) => {
if (isMove) e.preventDefault();
});
});А еще ссылки срабатывают только после второго нажатия, кто может подсказать что не так. Не знаю можно ли тут адрес сайта оставлять.