Горизонтальный скролл с удержанием кнопки мыши
Модификация добавляет функционал конкретному Zero block, в котором реализован горизонтальный скролл. Элементы будут скроллиться с помощью прокрутки и удержания кнопкой мыши. Также модификация скрывает горизонтальный скроллбар. Демо решения.
Как сделать
- В настройках Zero block поставь overflow: auto.
- Укажи здесь в настройках id блока.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
<!--https://romanyu.ru/skroll-s-uderzhaniem-knopki-myshi-->
<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>
<script>
$(function() {
// Укажи ID Zero блока и включи overflow: auto
const blockId = '#rec236105419';
$(blockId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
$(blockId + ' .t396').css('overflow','hidden');
new ScrollBooster({
viewport: $(blockId + ' .scrollbooster-viewport')[0],
content: $(blockId + ' .scrollbooster-content')[0],
scrollMode: 'native',
pointerMode: 'mouse',
bounce: false,
onPointerDown: function() { $(blockId + ' *:focus').blur() }
});
});
</script>
<style>
.scrollbooster-viewport {
cursor: -webkit-grab;
cursor: grab;
padding-bottom: 30px;
margin-bottom: -30px;
}
.scrollbooster-viewport:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.scrollbooster-content {
position: absolute;
width: 100%;
height: 100%;
}
</style>Понравилось решение?
Закинь денежку в благодарность за крутые и полезные модификации для Тильды!
Код успешно скопирован!