const smoothScrollStep = () => { const currentScrollLeft = elem.scrollLeft; const distance = targetScrollLeft - currentScrollLeft; if (Math.abs(distance) < 1) { elem.scrollLeft = targetScrollLeft; animationFrameId = null; return; } const newScrollLeft = currentScrollLeft + distance * 0.1; if (newScrollLeft >= 0 && newScrollLeft <= (elem.scrollWidth - elem.clientWidth)) { elem.scrollLeft = newScrollLeft; } animationFrameId = requestAnimationFrame(smoothScrollStep); }; const stopRunningAnimation = () => { if (animationFrameId !== null) { cancelAnimationFrame(animationFrameId); animationFrameId = null; } elem.style.setProperty('scroll-behavior', 'auto', 'important'); elem.scrollLeft = elem.scrollLeft; elem.style.scrollBehavior = ''; }; const handleWheelScroll = (event) => { if (!isElementCenteredInViewport(elem)) { return; } const visibleWidth = elem.offsetWidth; const maxScrollLeft = elem.scrollWidth - visibleWidth; if (maxScrollLeft <= 0) { return; } const delta = event.deltaY > 0 ? 1 : -1; const nextPosition = elem.scrollLeft + delta * Math.max(20, Math.round(visibleWidth / 10)); const atLeftBoundary = elem.scrollLeft - 20 <= 0.5 && delta < 0; const atRightBoundary = elem.scrollLeft + 20 >= (maxScrollLeft - 0.5) && delta > 0; // остановим стандартный скролл (важно: слушатель должен быть не-пассивным) event.preventDefault(); targetScrollLeft = Math.min(Math.max(0, nextPosition), maxScrollLeft); if (!animationFrameId) { animationFrameId = requestAnimationFrame(smoothScrollStep); } }; // --- безопасный селектор: защищает от "битых" селекторов с символами из URL --- function safeQueryWithin(baseSelector, subSelector) { try { if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') { // если baseSelector это набор через запятую, обработаем каждый const parts = baseSelector.split(',').map(p => p.trim()).filter(Boolean); const escapedParts = parts.map(p => { // если селектор начинается с '#', экранируем только id-часть if (p.startsWith('#')) { const id = p.slice(1).split(' ')[0]; return '#' + CSS.escape(id) + p.slice(1 + id.length); } // иначе экранируем каждый токен return p.split(/\s+/).map(token => CSS.escape(token)).join(' '); }); const escapedSelector = escapedParts.join(','); return document.querySelectorAll(escapedSelector + ' ' + subSelector); } else { // fallback: если это id-подход — попробовать через getElementById if (baseSelector.startsWith('#')) { const id = baseSelector.slice(1).split(' ')[0]; const container = document.getElementById(id); return container ? container.querySelectorAll(subSelector) : document.querySelectorAll([]); } // last resort return document.querySelectorAll(baseSelector + ' ' + subSelector); } } catch (err) { // окончательный fallback: попытка через getElementById с первой "частью" try { const maybeId = baseSelector.replace(/^#/, '').split(' ')[0]; const container = document.getElementById(maybeId); return container ? container.querySelectorAll(subSelector) : document.querySelectorAll([]); } catch (e) { return document.querySelectorAll([]); } } } // --- заменяем оригинальные querySelectorAll(...) на безопасные вызовы --- const arrowSelector = arrowBlocks[index]; setTimeout(() => { const forwardButtons = safeQueryWithin(arrowSelector, '.scrollfwd'); const backButtons = safeQueryWithin(arrowSelector, '.scrollback'); forwardButtons.forEach((button) => { button.style.userSelect = 'none'; button.style.cursor = 'pointer'; button.addEventListener('click', () => { stopRunningAnimation(); const newScrollLeft = Math.min(elem.scrollLeft + shift, elem.scrollWidth - elem.clientWidth); elem.scrollTo({ left: newScrollLeft, behavior: 'smooth' }); }); }); backButtons.forEach((button) => { button.style.userSelect = 'none'; button.style.cursor = 'pointer'; button.addEventListener('click', () => { stopRunningAnimation(); const newScrollLeft = Math.max(0, elem.scrollLeft - shift); elem.scrollTo({ left: newScrollLeft, behavior: 'smooth' }); }); }); // если elem существует — навесим wheel как не-пассивный (иначе preventDefault не работает) try { if (elem && typeof elem.addEventListener === 'function') { elem.addEventListener('wheel', handleWheelScroll, { passive: false }); } } catch (e) { // в старых браузерах может не поддерживаться опция, используем вариант без опций try { elem.addEventListener('wheel', handleWheelScroll); } catch (ignore) {} } }, 500);