Как сделать боковой скролл в зеро блоке?

Этот скрипт позволит тебе сделать простой и удобный боковой скролл в зероблок со своими стрелками. Работает с Autoscale. Пример работы модификации внизу cтраницы

1 мин.

Видео-инструкция

JavaScript
Zeroblock

Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓

!

1. Создай нужное количество зероблоков с выходящими за их границы элементами, в которых будем делать боковой скролл и укажи их recid в генераторе

2. Если будешь делать стрелки для скролла, то задай им класс scrollfwd для стрелки вперед и scrollback для стрелки назад. Эти стрелки размести в зероблоке над тем, в котором тебе будет нужен скролл и удали оттуда весь контент и фон (этот отдельный зеро будет иметь высоту 0 и нужен только чтобы оставить стрелки зафиксированными)




3. Также если будешь делать стрелки, то пропиши расстояние, на которое они будут скроллить блок для всех разрешений и задай время анимации перелистывания

4. Если будешь делать скролл блока по колесику мыши, то выбери соответствующую настройку (также см. Важно)

5. Скопируй код и вставь в блок т123
Инструкция
Важно!
- Скролл будет работать до самого крайнего правого элемента (до его правой части). Поэтому если например у тебя он обрезается каким-нибудь меню, или просто нужно сделать отступ, то просто сделай прозрачный шейп и им всё отрегулируй
- Если тебе нужно сделать, чтобы в одном блоке скролл прокручивался мышкой, а в другом нет, то выбери соответствующий пункт и сгенерируй код для этих блоков отдельно (также поступи и в случае с "переводить боковой скролл колесиком мыши в обычный при окончании бокового скролла")
(Развернуть)
undefined
Скопировать
scrollfwd
Скопировать
scrollback
Скопировать код
Отчистить поля


123
Поскольку для всех зеро боковой скролл задается одним блоком т123, то здесь будет один пример с двумя блоками. В нижнем включены стрелки и автоскейл
Пример работы модификации
Zero Block 1
create your own block from scratch
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Zero Block 2
create your own block from scratch
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Zero Block 3
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Пример с боковым скроллом колесиком мыши. Обрати внимание, что поскольку у меня в первых двух блоках скролла мышью нет, то для этого блока мне нужно было сгенерировать отдельный код

Опиши нужный функционал через эту форму и он будет добавлен!

Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности
Не хватает какой-то функции?