URL скопирован в буфер обмена!
Как сделать горизонтальный скролл разделов в потоках?
С помощью этой модификации можно сделать горизонтальную прокрутку разделов в новостных блоках тильда. Горизонтальный скролл работает как на десктопах, так и на мобильных устройствах, поддерживая блоки FD101, FD201, FD301, FD302 и FD401.
Модификация работает с включенным Autoscale в блоках
Модификация обновлена. Добавленная поддержка разных вариантов отображения потоков на мобилке (поток или слайдер).
Модификация работает только со стандартными блоками
Номер модификации в библиотеке TiCode
Id блока новостей
Формат блока на мобилках
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD094--><style>
#rec848334740 .t915__container,
#rec848334740 .t897__container,
#rec848334740 .t1004__feed-parts-container,
#rec848334740 .t-feed__container,
#rec848334740 .t-feed__wrapper,
#rec848334740 .t-feed__grid,
#rec848334740 .t-feed__posts{
display:block !important;
overflow-x:visible !important;
}
#rec848334740 .js-feed-parts-select-container{
overflow-x:auto !important;
overflow-y:hidden !important;
-webkit-overflow-scrolling:touch !important;
scroll-behavior:smooth !important;
-ms-overflow-style:none !important;
scrollbar-width:none !important;
white-space:nowrap !important;
flex-wrap:nowrap !important;
}
#rec848334740 .js-feed-parts-select-container::-webkit-scrollbar{ display:none !important; }
#rec848334740 .t-feed__parts-switch-wrapper{
display:inline-flex !important;
flex-wrap:nowrap !important;
white-space:nowrap !important;
}
#rec848334740 .t-feed__parts-switch-btn{
flex:0 0 auto !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;
-webkit-tap-highlight-color:transparent;
}
#rec848334740 .js-feed-parts-switcher.uc-nopointer{ pointer-events:none !important; }
#rec848334740 .t-feed__parts-switch-btn {
margin-left: 0 !important;
}
@media screen and (max-width: 960px) {
#rec848334740 .js-feed-parts-select-container{
width: 600px;
margin-left: 20px;
padding: 0px !important;
}}
@media screen and (max-width: 620px) {
#rec848334740 .js-feed-parts-select-container{
margin-left: 20px;
padding-left: 0px;
padding-right: 20px;
}
#allrecords ul.t-feed__parts-switch-wrapper {
margin-left: 0px;
margin-right: 20px;
padding-left: 0px;
padding-right: 20px;
}}
@media screen and (max-width: 480px) {
#rec848334740 .js-feed-parts-select-container{
margin-left: 0px;
}
#allrecords ul.t-feed__parts-switch-wrapper {
margin-left: 20px;
margin-right: 0px;
}
} #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;
}
}
@media screen and (max-width: 960px) {
#rec848334740 .js-feed-parts-select-container{
width: 600px;
margin-left: 20px;
padding: 0px !important;
}}
@media screen and (max-width: 620px) {
#rec848334740 .js-feed-parts-select-container{
margin-left: 20px;
padding-left: 0px;
padding-right: 20px;
}
#allrecords ul.t-feed__parts-switch-wrapper {
margin-left: 0px;
margin-right: 20px;
padding-left: 0px;
padding-right: 20px;
}}
@media screen and (max-width: 480px) {
#rec848334740 .js-feed-parts-select-container{
margin-left: 0px;
}
#allrecords ul.t-feed__parts-switch-wrapper {
margin-left: 20px;
margin-right: 0px;
}
}
</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('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>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем стандартный новостной блок (модификация поддерживает блоки FD101, FD201, FD301, FD302 и FD401), копируем id блока и вставляем в генератор в поле «Id блока новостей»
2. Если в настройках блока в разделе «Элементы списка» вы включали опцию «Показывать карточки в один ряд на мобильных устройствах», то в поле «Тип блока на мобильных» выберите вариант «Слайдер»;
3. Подключаем в блок через "контент" новостной поток с разделами. В настройках блока во вкладке "разделы" ставим выравнивание разделов по левой стороне.
3. Копируем готовый код и вставляем в HTML блок Т123. Блок кода размещаем под блоком потоков.
2. Если в настройках блока в разделе «Элементы списка» вы включали опцию «Показывать карточки в один ряд на мобильных устройствах», то в поле «Тип блока на мобильных» выберите вариант «Слайдер»;
3. Подключаем в блок через "контент" новостной поток с разделами. В настройках блока во вкладке "разделы" ставим выравнивание разделов по левой стороне.
3. Копируем готовый код и вставляем в HTML блок Т123. Блок кода размещаем под блоком потоков.
