URL скопирован в буфер обмена!

Как сделать горизонтальный скролл разделов в потоках?

С помощью этой модификации можно сделать горизонтальную прокрутку разделов в новостных блоках тильда. Горизонтальный скролл работает как на десктопах, так и на мобильных устройствах, поддерживая блоки FD101, FD201, FD301, FD302 и FD401.

Модификация работает с включенным Autoscale в блоках
Модификация работает только со стандартными блоками
Номер модификации в библиотеке TiCode

Генератор кода

Id блока новостей
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD094--><style> #rec848334740 .js-feed-parts-select-container { display: flex !important; overflow-x: auto !important; scroll-behavior: smooth !important; -ms-overflow-style: none !important; scrollbar-width: none !important; } #rec848334740 .js-feed-parts-select-container::-webkit-scrollbar { display: none !important; } #rec848334740 .t-feed__parts-switch-wrapper { display: inline-flex !important; } #rec848334740 .t-feed__parts-switch-btn { display: inline-block !important; white-space: nowrap !important; } #rec848334740 .js-feed-parts-select-container, #rec848334740 .js-feed-parts-switcher, #rec848334740 .js-feed-parts-select-container * { -webkit-user-drag: none; user-select: none; } #rec848334740 .js-feed-parts-switcher.disable-pointer { pointer-events: none; } @media screen and (max-width: 960px) { #rec848334740 .t915__container, #rec848334740 .t897__container, #rec848334740 .t1004__feed-parts-container { display: flex !important; }} </style> <script> (function() { if (window.innerWidth > 960) { const TiCodeSkrollFeeds = document.querySelectorAll('#rec848334740 .js-feed-parts-select-container'); TiCodeSkrollFeeds.forEach(container => { let TCDscrols = false; let TCDX; let scrollLeft; const TCDfeedbtn = container.querySelectorAll('#rec848334740 .js-feed-parts-switcher'); const TCd0ffPointer = () => { TCDfeedbtn.forEach(button => button.classList.add('disable-pointer')); }; const enablePointer = () => { TCDfeedbtn.forEach(button => button.classList.remove('disable-pointer')); }; container.addEventListener('pointerdown', (e) => { if (e.target.classList.contains('#rec848334740 js-feed-parts-switcher')) { return; } TCDscrols = true; container.style.cursor = 'grabbing'; TCDX = e.pageX - container.getBoundingClientRect().left; scrollLeft = container.scrollLeft; TCd0ffPointer(); }); container.addEventListener('pointermove', (e) => { if (!TCDscrols) return; e.preventDefault(); const x = e.pageX - container.getBoundingClientRect().left; const walk = (x - TCDX); container.scrollLeft = scrollLeft - walk; }); container.addEventListener('pointerup', () => { TCDscrols = false; container.style.cursor = 'default'; enablePointer(); }); container.addEventListener('pointerleave', () => { if (TCDscrols) { TCDscrols = false; container.style.cursor = 'default'; enablePointer(); } }); }); } })(); </script>
КОПИРОВАТЬ КОД
1. Создаем стандартный новостной блок (модификация поддерживает блоки FD101, FD201, FD301, FD302 и FD401), копируем id блока и вставляем в генератор в поле "Id блока новостей"

2. Подключаем в блок через "контент" новостной поток с разделами. В настройках блока во вкладке "разделы" ставим выравнивание разделов по левой стороне.

3. Копируем готовый код и вставляем в HTML блок Т123
Made on
Tilda