Мышка срабатывает не с первого раза. Где может быть ошибка?
Всем привет, сделал прокручивающийся элемент для сайта, с помощью людей с этого сайта, сделал чтобы при перемещении мышкой не было перехода по ссылке, но теперь переход происходит только со 2 клика. Как можно исправить подскажите.
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();
});
});.publik {background-color: rgba(34, 34, 34, 0.7);border-radius: 30px; height: auto;margin-top: 15px; margin-bottom: 15px;position: relative;padding-bottom: 15px;display: flow-root;}
.publikhead {padding: 10px;text-transform: uppercase;font-size: 18px;font-weight: 700;border-radius: 25px;background: black;margin-bottom: 10px;display: flex;justify-content: space-between;align-items: center;}
.slider {visibility: visible; position: absolute; display: flex;left: 5px; }
.scroll { position: relative; width: 100%;overflow-x: auto;overflow-y: hidden; user-select: none; cursor: pointer;height: 265px;visibility: hidden; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.scroll:hover {visibility: visible; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.scroll.active { background: rgba(36, 35, 35, 0.3); cursor: grabbing; cursor: -webkit-grabbing;}
.scroll::-webkit-scrollbar { width: 10px;}
.scroll::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa;}
.scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: black;
-o-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);}
.film {display: flex;flex-wrap: wrap;width: 100%;overflow: hidden;justify-content: center;}
.film1 {width: 200px; height: 320px; overflow: hidden;position: relative;margin: 5px;border-radius: 25px; text-align: center; background-color: #00000077;}
.film2 { height: 280px;overflow: hidden;}
.film2 img {width: 100%;display: block;height: 100%;transition: 1s;}
.film1:hover .filmshadow {opacity: 1;}
.film1:hover .film2 img {transform: scale(1.2);}
.sliderfilm {height: 350px;}
.film1 span { font-weight: 900;display: flex;align-items: center;height: 36px;justify-content: center;padding: 0 2px;}<div class="publik">
<div class="publikhead">Сериалы <a href="/short-serial" class="nodisplay">Все сериалы</a> <a href="/serialadd.html" title="Добавить сериал"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
</div>
<div class="scroll sliderfilm">
<div class="slider ">
<div class="film1">
<a href="https://sefil.ru/short-serial/2209-limitchicy-2021.html" title="Лимитчицы (2021)"><div class="filmshadow"></div>
<div class="film2"><img src="https://sefil.ru/uploads/posts/2023-03/1678286580_2828103.jpg" alt="Русский Сериал Лимитчицы (2021) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Лимитчицы (2021)"></div>
<span>Лимитчицы (2021)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2204-seks-v-bolshom-gorode-1998.html" title="Секс в большом городе (1998)"><div class="filmshadow"></div>
<div class="film2"><img src="https://sefil.ru/uploads/posts/2023-03/1678212338-601547979-seks-v-bolshom-gorode.webp" alt="Сериал Секс в большом городе (1998) (Sex and the City) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Секс в большом городе (1998)"></div>
<span>Секс в большом городе (1998)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2197-chosonskij-zapret-na-vstuplenie-v-brak-2022.html" title="Чосонский запрет на вступление в брак (2022)"><div class="filmshadow"></div>
<div class="film2"><img src="https://sefil.ru/uploads/posts/2023-03/1678112950-2128748085-chosonskiy-zapret-na-vstuplenie-v-brak.webp" alt="Сериал Чосонский запрет на вступление в брак (2022) (Geumhonryeong: Joseon honin geomjiryeong) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Чосонский запрет на вступление в брак (2022)"></div>
<span>Чосонский запрет на вступление в брак (2022)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2194-ohota-monte-perdido-2019.html" title="Охота. Монте-Пердидо (2019)"><div class="filmshadow"></div>
<div class="film2"><img src="https://sefil.ru/uploads/posts/2023-03/1678097920-1718112679-ohota-monte-perdido.webp" alt="Сериал Охота. Монте-Пердидо (2019) (La caza. Monteperdido) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Охота. Монте-Пердидо (2019)"></div>
<span>Охота. Монте-Пердидо (2019)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2189-himija-smerti-2023.html" title="Химия смерти (2023)"><div class="filmshadow"></div>
<div class="film2"><img src="https://sefil.ru/uploads/poster_none.png" alt="Сериал Химия смерти (2023) (The Chemistry of Death) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Химия смерти (2023)"></div>
<span>Химия смерти (2023)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2176-pmzhejson-2022.html" title="ПМЖейсон (2022)"><div class="filmshadow"></div>
<div class="film2"><img src="https://sefil.ru/uploads/posts/2023-03/1677769456-298324422-pmzheyson.webp" alt="Русский Сериал ПМЖейсон (2022) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="ПМЖейсон (2022)"></div>
<span>ПМЖейсон (2022)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2174-korol-i-shut-2023.html" title="Король и Шут (2023)"><div class="filmshadow"></div>
<div class="film2"><img src="/uploads/posts/2023-03/1677764801-104552203-korol-i-shut.webp" alt="Русский Сериал Король и Шут (2023) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Король и Шут (2023)"></div>
<span>Король и Шут (2023)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2172-temnyj-angel-2000.html" title="Темный ангел (2000)"><div class="filmshadow"></div>
<div class="film2"><img src="/uploads/posts/2023-03/1677762583-2040712244-temnyy-angel.webp" alt="Сериал Темный ангел (2000) (Dark Angel) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Темный ангел (2000)"></div>
<span>Темный ангел (2000)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2170-chernyj-sneg-2023.html" title="Чёрный снег (2023)"><div class="filmshadow"></div>
<div class="film2"><img src="/uploads/posts/2023-03/1677697102-1840338613-chernyy-sneg.webp" alt="Сериал Чёрный снег (2023) (Black Snow) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Чёрный снег (2023)"></div>
<span>Чёрный снег (2023)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2165-novyj-vishnevyj-vkus-2021.html" title="Новый вишнёвый вкус (2021)"><div class="filmshadow"></div>
<div class="film2"><img src="/uploads/posts/2023-02/1677576897-1931254658-novyy-vishnevyy-vkus.webp" alt="Сериал Новый вишнёвый вкус (2021) (Brand New Cherry Flavor) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Новый вишнёвый вкус (2021)"></div>
<span>Новый вишнёвый вкус (2021)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2160-poroh-2017.html" title="Порох (2017)"><div class="filmshadow"></div>
<div class="film2"><img src="/uploads/posts/2023-02/1677494941-1423174652-poroh.webp" alt="Сериал Порох (2017) (Gunpowder) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Порох (2017)"></div>
<span>Порох (2017)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2157-kto-to-2022.html" title="Кто-то (2022)"><div class="filmshadow"></div>
<div class="film2"><img src="/uploads/posts/2023-02/1677490345-1771350320-kto-to.webp" alt="Сериал Кто-то (2022) (Seombadi) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Кто-то (2022)"></div>
<span>Кто-то (2022)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2152-kurtizanki-2017.html" title="Куртизанки (2017)"><div class="filmshadow"></div>
<div class="film2"><img src="/uploads/posts/2023-02/1677407215-562944392-kurtizanki.webp" alt="Сериал Куртизанки (2017) (Harlots) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Куртизанки (2017)"></div>
<span>Куртизанки (2017)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2150-sijajuschaja-dolina-2022.html" title="Сияющая долина (2022)"><div class="filmshadow"></div>
<div class="film2"><img src="/uploads/posts/2023-02/1677403612-1076146763-siyayuschaya-dolina.webp" alt="Сериал Сияющая долина (2022) (Shining Vale) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Сияющая долина (2022)"></div>
<span>Сияющая долина (2022)</span>
</a>
</div><div class="film1">
<a href="https://sefil.ru/short-serial/2148-schastlivyj-gorod-2010.html" title="Счастливый город (2010)"><div class="filmshadow"></div>
<div class="film2"><img src="/uploads/posts/2023-02/1677320613-720704312-schastlivyy-gorod.webp" alt="Сериал Счастливый город (2010) (Happy Town) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Счастливый город (2010)"></div>
<span>Счастливый город (2010)</span>
</a>
</div>
</div>
</div>
<a href="/short-serial" class="publikmob">Все сериалы</a>
</div>