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
2. Подключаем в блок через "контент" новостной поток с разделами. В настройках блока во вкладке "разделы" ставим выравнивание разделов по левой стороне.
3. Копируем готовый код и вставляем в HTML блок Т123
