Если будешь делать стрелки для скролла, то задай им класс scrollfwd для стрелки вперед и scrollback для стрелки назад и укажи id блока в котором у тебя эти стрелки в генераторе. Если тебе нужно чтобы стрелки накладывались на блок ниже, то просто включи в самом зероблоке overflow visibl.
scrollfwd scrollback
Также если будешь делать стрелки, то пропиши расстояние, на которое они будут скроллить блок для всех разрешений и задай время анимации перелистывания.
Если будешь делать скролл блока по колесику мыши, то выбери соответствующую настройку (также см. Важно)
- Скролл будет работать до самого крайнего правого элемента (до его правой части). Поэтому если например у тебя он обрезается каким-нибудь меню, или просто нужно сделать отступ, то просто сделай прозрачный шейп и им всё отрегулируй
- Если тебе нужно сделать, чтобы в одном блоке скролл прокручивался мышкой, а в другом нет, то выбери соответствующий пункт и сгенерируй код для этих блоков отдельно (также поступи и в случае с "переводить боковой скролл колесиком мыши в обычный при окончании бокового скролла" или если у тебя много скроллов со стрелками
https://voron-dev.ru/horizontal-scroll
<script>document.addEventListener('DOMContentLoaded', function () { let arrowBlocks = ['#rec857368010']; let scrollableBlocks = ['#rec838187629']; let shift = 300; switch (true) { case (window.innerWidth > 1200): shift = 600; break; case (window.innerWidth > 960): shift = 200; break; case (window.innerWidth > 640): shift = 200; break; case (window.innerWidth > 480): shift = 200; break; default: shift = 200; break; }; const isElementCenteredInViewport = (el) => { const rect = el.getBoundingClientRect(); const viewportCenter = window.innerHeight / 2; const elementCenter = (rect.top + rect.bottom) / 2; const threshold = window.innerHeight / 5; return Math.abs(elementCenter - viewportCenter) < threshold; }; scrollableBlocks.forEach((scrollSelector, index) => { const elem = document.querySelector(scrollSelector + ' .t396__artboard'); if (!elem) return; const img = elem.querySelector('img'); if (img) { img.ondragstart = () => false; } elem.style.overflowX = 'auto'; elem.style.overflowY = 'hidden'; const carrier = elem.querySelector('.t396__carrier'); if (carrier) { carrier.style.position = 'sticky'; } elem.style.cursor = 'grab'; let pos = { left: 0, x: 0 }; let targetScrollLeft = elem.scrollLeft; let animationFrameId = null; const mouseDownHandler = (e) => { elem.style.cursor = 'grabbing'; elem.style.userSelect = 'none'; pos = { left: elem.scrollLeft, x: e.clientX }; document.addEventListener('mousemove', mouseMoveHandler); document.addEventListener('mouseup', mouseUpHandler); }; const mouseMoveHandler = (e) => { const dx = e.clientX - pos.x; elem.scrollLeft = pos.left - dx; }; const mouseUpHandler = () => { elem.style.cursor = 'grab'; elem.style.removeProperty('user-select'); document.removeEventListener('mousemove', mouseMoveHandler); document.removeEventListener('mouseup', mouseUpHandler); }; elem.addEventListener('mousedown', mouseDownHandler); const smoothScrollStep = () => { const currentScrollLeft = elem.scrollLeft; const distance = targetScrollLeft - currentScrollLeft; if (Math.abs(distance) < 1) { elem.scrollLeft = targetScrollLeft; animationFrameId = null; return; } elem.scrollLeft = currentScrollLeft + distance * 0.1; animationFrameId = requestAnimationFrame(smoothScrollStep); }; 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 <= 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); } }; const arrowSelector = arrowBlocks[index]; setTimeout(() => { const forwardButtons = document.querySelectorAll(arrowSelector + ' .scrollfwd'); const backButtons = document.querySelectorAll(arrowSelector + ' .scrollback'); forwardButtons.forEach((button) => { button.style.zIndex = '99'; button.style.userSelect = 'none'; button.style.cursor = 'pointer'; button.addEventListener('click', () => { elem.scrollBy({ left: shift, behavior: 'smooth' }); }); }); backButtons.forEach((button) => { button.style.zIndex = '99'; button.style.userSelect = 'none'; button.style.cursor = 'pointer'; button.addEventListener('click', () => { elem.scrollBy({ left: -shift, behavior: 'smooth' }); }); }); }, 500); }); }); </script><style>#rec838187629 .t396__artboard::-webkit-scrollbar { display: none; } #rec838187629 .t396__artboard { scrollbar-width: none; }</style>