Лучший горизонтальный скролл в тильде кнопкой мыши | Drag and scroll в Tilda Zero Block

[@lethamyre]

Забыли упомянуть, что нужно обязательно выставить auto в настройках overflow, чтобы работало на мобилках. Спасибо за гайд! P.S. После настройки "auto" в пк версии появляется противный ползунок. Если он режет глаз - скопируйте блок и настройте, чтобы без auto отображалось на десктопах, а с ауто - на остальных устройствах

[@Alina-er7me]

спасибо вам!)

[@lethamyre]

@@Alina-er7me рад помочь

[@ИгорьАвралов-т5ы]

А не подскажете, как можно этот ползунок убрать на мобильных? Или хотя бы сделать его в цвет фона, чтобы был незаметный

[@lethamyre]

@@ИгорьАвралов-т5ы к сожалению не подскажу, это нужно к автору кода обращаться видимо

[@Данька-д4з]

Сделал всё как вы сказали - работало дней 5, потом перестал работать слайдер на десткопах

[@Анастасия-д2ф5ц]

Я так давно это искала. Казалось все так просто, но не могла реализовать. Спасибо!!!! Удачи вам.

[@billyfred9107]

Оооо, круто, спасибо! Давно хотел узнать как это сделать. Столько мыслей о кастомизации такого скролла сразу пролетело в голове)

[@snlife5592]

Супер, отличное видео! Но вопрос: почему может возникать проблемы в мобильной версии? На одном сайте все норм, скролит. На другом в компьютерной версии норм, в мобильной - не работает.

[@VideoHosting-h2y]

С такой же проблемой столкнулся

[@deadward1337]

тоже такой же вопрос

[@filkataev]

такая же проблема

[@РамазанСултанбеков-о9ц]

@@deadward1337 наши как решить?

[@РамазанСултанбеков-о9ц]

@@filkataev наши как решить?

[@Pavel_1615]

Получилось, спасибо. Но для пользователя это не удобно ! Как сделать так же что бы еще и колесом мыши можно было прокрутить???

[@НадеждаЗавитаева-ж7э]

ничего, конечно, не заработало... но появилась ладошка))

[@НикитаТумаров-л3п]

Большое спасибо! Мне это очень помогло! Дай Бог тебе удачи и творческих успехов!!!

[@VovaSumrak]

Отличные видео. Здорово было бы, если бы сделал скрол-карусель с товарами в тильде.

[@usatov2188]

Как всегда лайк! Было бы круто показать ещё и как делается это по скроллу. Спасибо за контент, подписка и колокольчик оформлены!

[@design_scripts]

Чуть позже будет по скроллу со skew искажением🔥

[@webmarina]

По скроллу можно просто анимацией сделать

[@mdesign8409]

@@webmarina да и так можно сделать стандартно в тильде выставляя в опциях визбл хиден ), но это реально за 1 минуту , а не геморроиться с фиксацией по горизонтальному скроллу если речь идет о нём, когда куча элементов и они находятся на разных высотах, там начинается треш в подгоне по пикселям

[@stannis_love]

Почему у меня появляется вертикальная полоска прокрутки при скролле на экаранх меньше 1200px? И мало того, я захватив мышкой экран, еще и могу вверх в низ скроллить пикселей на 20. У тебя в примере не увидел вертикальной полоски =/

[@СашаЭтко-и9ю]

Подскажите, разобрались? У меня та же проблема((

[@milton2194]

Потрясающе! Лучший по тильде на ютубе

[@design_scripts]

Правда? Приятно слышать🔥

[@Валерий-д3э8г]

А для мобильного в зеро блоке - просто включить оверфлоу авто, правильно? Видос огонь

[@design_scripts]

Всё верно ;)

[@liza_yashkova]

Привет, а ты сталкивался с тем, что в яндекс браузере очень долго подгрудается скрипт? В гугле и сафари все ок, в яндексе состариться можно, пока он оживет

[@root3690]

Супер! Спасибо за необычный контент для tilda zero block

[@design_scripts]

Рад, что понравилось)

[@user-eb7xs4wj2r]

Можно ли сделать тоже самое, только вместо курсора поставить две стрелки по краям центрального изображения и сделать типа слайдера, чтобы при нажатии на стрелку происходило смещение на одно изображение?

[@user-lf1hb9co5f]

Добрый день! Подскажите пожалуйста, а на мобильной версии будет работать? Или как реализовать можно

[@Djpnm]

можно еще стрелки сюда добавить??? и как их примастерить?

[@ипсипи]

добрый день. спасибо за видео) но у меня появилась полоса скролла внизу под блоками. подскажите, как убрать ее?

[@foks_le]

Привет) покажи, пожалуйста, как сделать этот код для адаптива? чтобы пальцем можно было на экране телефона так делать)

[@yason8834]

нашли? подскажите плз

[@skyfit25]

аналогично, на мобиле это не работает

[@yason8834]

@@skyfit25 в десктопе просто поставьте фрейму тип auto, а в мобиле за екран елементы и они будут свайпатся. комп версию скрыть в настройках блока

[@cats-hair-on-a-table]

@@yason8834 SPASIBO

[@anton_khodunov]

@@yason8834 Привет, расскажи пожалуйста по подробнее, не понял тебя)

[@DmitrySytnikCommunication]

Спасибо за видос! А как отключить горизонтальный drag? И можно ли как-то отключить полосы прокрутки в хроме? Кто-то ещё сталкивался с кривым отображением в хроме?

[@DmitrySytnikCommunication]

Это явно из-за overflow auto, но я не понимаю как это победить(

[@АлинаЗайнуллина-з5ж]

Здравствуйте, подскажите пожалуйста, а как можно поставить свой курсор вместо руки

[@blackflame5125]

Как зафиксирвать другие элементы например заголовок или фото на bg чтоб они не скролились? Хочу чтоб можно было скролить только фотками которые стоят више по слоям

[@condemime1]

Сделай их отдельным блоком

[@olgaschastlivaya1496]

@@condemime1 А если это блок на определенном сложном фоне?

[@olgaschastlivaya1496]

В том смысле, что нужно, чтобы фотографии скролились поверх другого изображения, которое стоит в качестве фона? И заголовок нужен в этом же блоке

[@Герцог-ф4з]

Действительно, это самый простой и короткий способ сделать горизонтальный скролл в тильде на десктопе (помимо включения overflow auto и дёргания ползунка😄)

[@design_scripts]

Спасибо)

[@alexgek8626]

Спасибо за видео! Не подскажешь, как сделать, чтоб полоска фото автоматически бесконечно прокручивалась до взаимодействия с ней, чтоб фото тихо плыли сами?

[@stannis_love]

в стиле кода добавь строку autoplay: true

[@nikitatrubitsin1047]

Просто шикарен! Спасибо тебе большое!

[@design_scripts]

И тебе спасибо за комментарий👋😉

[@videorelaxing4]

спасибо за видеоурок, код встал, все отлично) Но возникла небольшая проблема, данный скрол использовал под карточкой товаров, типа внизу карточки товара имеется скрол с товарами которые будут интересны, и прои скроле при нажатии мышкой чтобы заскролить открывается тот товар на который было наведена мышка, как избавиться от ътой проблемы???надеюсь понятно написал))))))

[@gfhkl82kj]

Огонь! Крутой контент. Спасибо)

[@design_scripts]

Приятно слышать, спасибо :D

[@rimmchik__]

Спасибо большое! очень понятно и работающе

[@fitzhy]

Начал тебя смотреть вчера и уже вставил первые строчки кода себе на сайт, спасибо за доступность и лёгкость. Если будут вопросы по некоторому функционалу Тильды, можно задавать и куда?

[@design_scripts]

В описании есть мои контакты. Лучше писать в вк)

[@goldsteinsam]

гениально, спасибо! это то, что я искал!

[@Фрилансерзасотку]

Чувак, в очередной раз спасибо 🙏 Помогаешь делать наши сайты на тильде круче

[@design_scripts]

И тебе спасибо, что смотришь)

[@АлександрКоновалов-ф6ь7х]

Привет! А можно ли как-то сделать так, чтобы карточки были кликабельные? Если им ссылку присваивать, то при попытке прокрутки происходит сразу переход по ссылке на карточке.

[@_shalamova]

Спасибо! Всё сразу заработало!

[@АлексейКиселёв-й1б]

Красавчик, я давно искал горизонтальный скролл для тильды. На mo-tilda не видел

[@design_scripts]

Ну вот, нашёл) Рад, что контент был для тебя полезен

[@o.ssultan]

как раз хотел пихнуть в один проект, лайк и колокольчик!

[@design_scripts]

Рад, что вовремя появился в твоём поле зрения)

[@АлександрКузнецов-р1х5э]

Спасибо тебе дружище! все просто и супер работает, но как сделать чтобы оно автоматически листало по кругу, можно ли как-то это сделать? я совсем нуб в коде...

[@donbotdonbot2522]

Спасибо за видео....за все видео ждем нового....!

[@АнастасияСарвилина-п3щ]

о как я искала эту инфу! Спасибо большое!

[@Chuzhoy.podkast]

Подскажите, а как сделать для мобильной версии горизонтальный скролл, например: продукции!?

[@Mylato4kaaa]

Почему у меня элементы скролятся не только вправо, но и вверх и вниз? Подскажите, пожалуйста!

[@dmitrykand5142]

Действительно в плане реализации гораздо быстрее «тильдошного» слайдера. Интересно фон остается прозрачный и можно подложить цветной шейп на фон?)

[@design_scripts]

Насчёт прозрачного фона - надо проверить Шейп поставить можно, почему нет?)

[@ЕленаСартасова-к6ю]

Как сделать так, чтобы фон зеро блок оставался фиксированным?

[@АнастасияТитова-з2л]

этому видео два года, но я в отчаянии. почему оно может не работать? вот просто не работает и все.

[@asapyo7961]

Как всегда все на вышке!

[@design_scripts]

Рад слышать, спасибо за коммент ╰( ͡° ͜ʖ ͡° )つ──☆*:・ﾟ

[@spyrofunk85]

Спасибо за урок! А можно ли такую штуку провернуть, если такой слайдер находится не в отдельном зеро блоке, а весь лендинг сделан одним целым зеро блоком (к сожалению так нужно), и посреди этой страницы предусмотрен такой слайдер. Можно ли к нему тогда обратится как-то или нет?

[@eduardhaiman4563]

Классно! А можно ли сделать так чтобы по скролу сдвигалось сразу несколько Zero блоков?

[@pollllava3478]

а если у меня в блоке есть фон и при скролле он становится белым где кончается область, как исправить? я не нашла подобной информации

[@abdulla3d]

Спасибо за контент. Как раз искал такой эффект для своего проекта

[@design_scripts]

Рад, что помог тебе)

[@larisa_presentation]

Скажите, пожалуйста, а как можно сделать, чтобыкак обычная галерея была (по бокам кнопки с переключением фото), а под этими фото был один текст? Я так понимаю стандартный блок галереи не подойдёт, а снизу просто блок с текстом добавить, так как нужно, чтобы фото были чуть поменьше - не так как в стандартных блоках.

[@Deva.lanaway]

Добрый день! Что-то случилось с кодом, до этого прекрасно работало (спасибо вам!), но сейчас появляются серые полосы (если ставить overflow auto) и только тогда можно прокрутить на дектопе, а вот на hidden курсор меняется, но данные не прокручиваются.

[@design_scripts]

Спасибо за комментарий. Код я проверю)

[@КсенияТарасова-р3ю]

Добрый вечер! Подскажите пожалуйста, как зафиксировать задний фон(фото) при горизонтальном скролле? И возможно ли это

[@annash4271]

Автор, кланяюсь в ножки. Господи сколько я мучалась и пересмотрела ненужного бреда, когда это было так просто!

[@erastfandorin5670]

Класс! Спасибо!

[@Irrinaa.w]

а как убрать полоску для пролистывания которая в браузере появляется?

[@goldyaroboy6046]

Узнали как?

[@nikitazhelyabin8483]

У меня у одного вверх вниз еще картинки двигаются, на 5-10 пикселей? Как от этого избавиться?

[@darykn8257]

Станислав, доброе утро! Механика супер, а можно как-то на мобилку такое внедрить? Что куда прописать? А то на десктопе отлично работает, нужна такая же механика для телефона (горизонтальный скролл превью видео)

[@majoorin]

Для корректного отображения на моб. версии необходимо задать параметр в Zero Block overflow: auto (цитирую человека выше)

[@mansurzaiden-k7m]

@@majoorin можно убрать код и поставить оверфлоу авто и так без кода будет работать

[@eugennaumov1860]

А как сделать горизонтальный скролл/прокрутку? Может есть ссылка на тутор?

[@ЭльвираЮсупова-э2п]

Здравствуйте! У меня дальше 2200 px не скроллиться. Что делать?

[@uzel_brand]

а как можно фиксировать фон по оси X? я совсем нуб в кодах. а найти не могу(( мои карточки ездят вверх вниз(

[@volodymyrkrysachenko4522]

Вопрос. Можно ли в тильде сделать форму со звёздами для отзывов?

[@СветланаРазова-ж2и]

Добрый день! А как сделать, чтобы он еще и в мобильной версии работал?

[@IvanOsipov]

Нашёл один косяк и не понимаю как его исправить, на десктопе данный скролл работает только если страница полностью прогрузилась. Если страница имеет много данных в начале, а скролл где нибудь в середине, он не будет работать пока не догрузится всё полностью. Кто-нибудь решил это?

[@masik-sushnyak]

автор как такую штуку на бесплатном тарифе провернуть?

[@АлександрПетров-ч6п]

Спасибо за контент) Есть ли сейчас делать смягчение скролла так, чтобы работало и с тачпада? Один скрипт есть в тильдошной , но работает он в лучше м случае с рывками. Заранее спасибо;)

[@factstimee]

А можно ли сделать так, чтобы в мобильной версии тоже был скрол с помощью свайпа?

[@factstimee]

уже нашел ответ. Спасибо за видео!

[@bekajoker4124]

А можете скинуть ссылку ? Тоже xотел добавить на мобильную версию

[@bobur6054]

@@bekajoker4124 узнали?

[@navigator9958]

Спасибо!! Бомба!! а на мобильной версии чего он не работает?

[@SBG_Argentina]

Overflow включи Auto

[@РадимР-ф5г]

А как сделать тоже самое, но со стрелками прокрутки, а не рукой?

[@design_scripts]

Взял идею на блокнот. Пока что подсказать не могу, сам такое писал давно, но готовое решение не сохранилось

[@Yan-fl5ii]

Стас, как всегда супербл! Лайк ещё до просмотра по классике✌🏻✌🏻

[@design_scripts]

Ахах, спасибо, бро. И от меня тебе лайк ещё до прочтения коммента🤙

[@yulikolesoff5591]

спасибо за видео. А как бы так сделать, чтоб без drag, а только scroll?

[@design_scripts]

Степ бай степ анимацией фиксировать элементы и анимировать позицию по скроллу

[@nikkisprings5736]

Можно ли использовать этот эффект на нескольких блоках в пределах одной страницы? Сделала два штмл блока и к каждому поставила свой айди блока, который хочу заанимировать. Первый работает отлично, а второй не двигается, хотя и появляется курсор. Можно ли это как-то реализивать?

[@gennadymolod6318]

Нашла решение?)

[@ОляЮщенко-т5ф]

Подскажи пожалуйста. Я сделала для моб версии. И когда я скроллю, наводя палец на этот блок, то элементы двигаются не только вправо, но и вверх. Это как-то исправляется?????

[@design_scripts]

Ммм, а для мобильной версии код не нужен. Там это достигается через overflow:auto

[@mislavsky]

@@design_scripts появляется стандартные элементы навигации в этом случае как типа... и появляется навигацию не только по горизонтали, но и по вертикали и это выглядит как ошибка. и вопрс 1) как спрятать элементы навигации? 2) как убрать возможность менять вертикального скрола guinot.center/shop-test - вот пример не получившигеося результата

[@by_Anastaz]

привет. код отлично работает на десктопе. а что насчет мобильной версии?

[@designatov]

А как же без вступительной фразы?) Спасибо за видос 💪💪 по шрифтам будешь что нибудь делать?)

[@design_scripts]

Так уж получилось)) Да, вроде, есть, не забыл👉👈 Я вышел на 2 видео в неделю: вт и пт. По вторникам классические скриптовые видео, как и было, а по пятницами - ux, типографика, дизайн и прочее. Всё-таки канал называется ДИЗАЙНЕР со скриптами, а не СКРИПТЕР с дизайном :D

[@design_scripts]

Или ты про эффекты со шрифтами?) В следующий вторник будет skew искажение шрифтов и картинок по скроллу. Классная вещь, видел на многих сайтов с конкурсов

[@ДмитроГавриков]

у меня появилась проблема, блоки которые видимы на экране отображаются хорошо. Но блоки которые стоят за экраном, и появляются при скроле не правильно отображаются. А точнее фотки не прогружаются. Но стоит сделать скрол в низ, то они сразу же подгружается?( как это исправить?

[@AleksKliper]

Нужно у фотографий отключить Lazyload поставить off

[@misterho5306]

Класс! спасибо

[@Neonetdesign]

Друзья, помогите разобраться) Когда оверфлоу - хиден, десктоп - работает, мобила - нет. Ставишь оверфлоу-авто, мобила работает, а на десктопе появляются бегунки горизонтальные и вертикальные. Можно от них как-то избавиться, чтоб не дублировать зероблоки под разную ширину экрана?)

[@design_scripts]

Можно установить css’ом для устройств с размером менее 1200 оверфлоу авто. Вроде, это должно сработать: @media and screen (max-width:1200) { #rec99999999 .t396__artboard { overflow:auto !important; } }

[@road322]

это просто бомба!!!

[@eduardzain7430]

Станислав здравствуйте, хотелось бы узнать о возможности реализации меню в мобильной версии, в верхней части экрана, с горизонтальным скроллом и изображениями, примерно как на сайте Apple, спасибо!

[@design_scripts]

Можно ссылку на страницу эппла с таким меню? Горизонтальный скролл на мобильной версии делается с помощью параметра overflow:auto в настройках зеро блока

[@design_scripts]

Попробуй зеро блок с параметром overflow auto для мобильных устройств)

[@bm-green]

Какой сделать такое для мобильной версии? данный код не работает у меня для мобильной версии(((

[@тильдаэксперт]

Бро, уверен скоро выстрелишь. Делаешь суперские видео по тильде и зеро блок, ты здраво конкурируешь с mo-ti.ru, romanyu и остальными. Но даже у них нет той же lottie или three.js в тильде. До сих пор отхожу от 3d моделей в zero block) Успехов тебе))

[@design_scripts]

Кстати, возможно, скоро буду запускать свой небольшой сайт со скриптами для тильды, чтобы всё было в одном месте. Спасибо)

[@webmarina]

@@design_scripts Было бы круто!

[@ainur531]

Здравствуйте, спасибо за классное видео. У меня к сожалению не открывается ссылка на скрипт. Почему?

[@smirnovroman7431]

Сделай пожалуйста, такой же на мобильную версию буду очень благодарен!

[@СветланаШишова-ш2ь]

Для корректного отображения на моб. версии необходимо задать параметр в Zero Block overflow: auto

[@Mylato4kaaa]

@@СветланаШишова-ш2ь Не подскажете, как это сделать?

[@РагимГусейнов-з7в]

@@Mylato4kaaa редактировать блок> settings> там будет параметр

[@majoorin]

@@СветланаШишова-ш2ь вы потрясающий

[@goldyaroboy6046]

@@СветланаШишова-ш2ь тогда появляется ползунок горизонтальный, как его убрать или скрыть?

[@Алина-л7з5ч]

У меня почему-то не работает(( курсор отображается, а действие не происходит.

[@design_scripts]

Всё прекрасно работает: neuro-designer.tilda.ws/page18170513.html Если что, код должен располагаться ниже, чем зеро блок со скроллом

[@english30sec]

Проверь, везде ли вставил ID блока в коде)

[@malenka_ya]

а лоя мобильной версии подходит?

[@design_scripts]

Нет

[@razumniy]

Крутяк! Спасибо..А как сделать чтобы и на десктопе был горизонтальный и на мобильном работал? Просто если делать overflow:auto, то появляется полоса прокрутки на десктопе некрасивая, но при этом на мобилке ок..

[@design_scripts]

Либо кодом, медиазапросами. Установить у устройств менее 960px overflow auto. Либо сделать два блока: один для мобильных, другой для десктопов. И настроить диапазон видимости через настройки блока

[@ВладКоваленко-ф8в]

@@design_scripts о, большое спасибо)

[@ilyasmirnov100]

@@design_scripts спасибо

[@ilimzhan]

Спасибо очень помог))

[@KvaziDuck]

скроллит вместе с фоном и текстом. ну текст, ок, я добавлю отдельным блоком, а как, чтоб без фона скролил? делаю шейпом (растягиваю) на мобиле каша получается

[@design_scripts]

Кодом фиксировать фон по оси X - только такой вариант вижу. Это ж аналог перемещения скроллбара при overflow auto. Ты двигаешь весь блок. При перемещении скроллбара тоже фон будет перемещаться

[@Avamyara]

в Зероблоке делаешь фон шейпом. Растягиваешь шейп на всю ширину прокручиваемых блоков. И БГ шейпа ставишь опцию BEHAVIOR не scroll a fixed

[@DashaVikova]

Здраствуйте! У меня видимо одной не получилось... не двигаются картинки.

[@design_scripts]

Убедитесь, что блок с кодом находится ниже зеро блока

[@DashaVikova]

@@design_scripts спасибо, что ответили, но с этим всё в порядке. Я поменяла "overflow - visible" на "hidden" и все заработало:) Спасибо большое за урок!

[@onlymozg6811]

Боже! Я тебя люблю!!!! Я не пи***р но тебя люблю XD как раз проект у меня со слайдом похожим! Сейчас использую от тильдошной, но там не то что нужно было!))

[@design_scripts]

И я тебя люблю, бро, спасибо за комментарий🔥

[@RyzhkovVlad1]

вставил видео, но нельзя скролить поверх видео... жаль. мне эти блоки зачем нужны? картинки туда вставить? ну такое. мне видео надо сделать при скролле

[@ЕленаЗамятина-л7в]

А как сделать чтобы на мобилке тоже был такой скролл?

[@Чудесный-ц9р]

Привет, много сайтов услуг используют yclients , на тильде его многие реализуют со стандартной кнопкой записи в правом нижнем углу, буду признателен и наверное не только я, если научишь в одном из видео заменять ее на свою кнопку. Думаю многим будет полезно, не нашёл подобного, много что перерыл, но реализацию подобную видел, к примеру у барбершопов бородач и топ ган.

[@teddyrose5289]

Как сделать такой слайдер при скролле вниз, а не зажимать мышкой?

[@cryptolol9386]

а как сделать что бы на пример на мобильном не была только одна колонка товара, а две или три в ряд?

[@design_scripts]

Стандартные блоки, да? Только кодом редактировать

[@ihorhavryliuk4680]

@@design_scripts да стандартные. В блока на компе в ряд есть 3 иконки товара, на мобильном только все в одну колонки вниз идет.

[@pollllava3478]

почему все картинки при скроле не прогружаются?

[@СвятославКазаковцев]

Здорово!)

[@МихаилКислов-ч5щ]

Привет! На комп отлично, на моб не работает?

[@design_scripts]

А на моб и не нужно. Overflow auto прекрасно справляется

[@МихаилКислов-ч5щ]

@@design_scripts Подскажи пожалуйста, как это сделать "Overflow auto"?

[@MikhailEremeev]

А как сделать на телефоне?

[@moviefreakkk]

Спасибо, 2 дня мучилась

[@polinavoropaieva8070]

Ребят, подскажите , сейчас код рабочий? А то я пробую и не получается(