Артборд Zero-блока обрезает всё, что вылезает за его края, — и обрезанное становится недоступным. Скрипт превращает артборд в область, которую можно таскать: зажали мышь или положили палец, потянули — содержимое поехало следом, отпустили на ходу — доехало по инерции и мягко остановилось. Полосы прокрутки при этом не появляется.
Ставится на любой Zero-блок, в котором объекты выходят за правую или нижнюю границу артборда: панорамный снимок, длинная схема процесса, лента карточек, карта зала.
Что настраивается
- ID Zero-блока — можно перечислить несколько блоков через запятую или указать класс, если блоков много и они однотипные.
- Направление перетаскивания — обе оси, только горизонталь или только вертикаль. Выбор влияет не только на движение: осью, которую скрипт не забирает себе, продолжает распоряжаться браузер, поэтому при «только по горизонтали» вертикальный свайп пальцем по блоку по-прежнему прокручивает страницу.
- Курсор над блоком — показывается только там, где содержимому действительно есть куда двигаться. «Рука» на время жеста сама превращается в сжатую.
- Инерция — сколько содержимое проезжает после броска. 0 — останавливается ровно там, где отпустили; 90 — примерно как нативная прокрутка телефона.
- Прокрутка колёсиком мыши — необязательный режим. Колесо и тачпад двигают содержимое, пока оно не упрётся в край, после чего прокрутка возвращается странице. Если выбрано движение только по горизонтали, обычное вертикальное колесо мыши двигает содержимое вбок — иначе у мыши без горизонтального колеса единственный способ его прокрутить – с зажатой клавишей «Shift».
- Управление с клавиатуры — блок получает фокус по Tab, дальше работают стрелки, PageUp/PageDown и Home/End, а рядом задаётся название области, которое читают скринридеры.
Как это работает
Артборд Тильды по умолчанию имеет overflow: hidden — это значит, что он уже является контейнером прокрутки: полосы нет, но scrollLeft и scrollTop работают. Скрипт этим и пользуется, двигая содержимое штатной прокруткой браузера, а не трансформациями. Отсюда несколько следствий: позиции элементов не «плывут», клики попадают туда, куда нужно, а вложенные попапы и анимации Тильды остаются на своих местах.
Жест ведётся через Pointer Events — один код на мышь, палец и стилус. Указатель захватывается блоком, поэтому перетаскивание не обрывается, если курсор или палец ушёл за край артборда. Первые 5 пикселей движения не считаются перетаскиванием: пока жест не перешёл этот порог, он остаётся обычным кликом.
Скорость броска считается по движениям за последние 100 мс, а не по двум последним точкам, — из-за этого инерция получается ровной даже при дёрганом жесте. Дальше скорость затухает по времени, а не по кадрам, поэтому длина выката одинакова на экранах 60 и 120 Гц.
Что учтено
- Порядок блоков на странице не важен. Скрипт стартует по готовности DOM и сам проверяет, отрисован ли уже артборд: если да — подключается сразу, если нет — ждёт событие
artBoardRendered. Блок с кодом можно ставить куда угодно, в том числе в «Настройки сайта → HEAD».
- Ссылки и триггеры анимации внутри блока работают. Тащить можно за любое место, включая текст, картинки и кнопки. Клик после перетаскивания гасится, так что случайных переходов по ссылке не будет, а обычное нажатие без движения срабатывает как всегда.
- Поля ввода не перехватываются. Внутри
input, textarea, select, видео и iframe жест не начинается — там нужны собственные клики и выделение.
- Выделение текста отключается только на время жеста. В остальное время текст в блоке можно спокойно выделить и скопировать.
- Ленивые картинки догружаются. Тильда обновляет их по прокрутке страницы, поэтому изображения, въезжающие в кадр при перетаскивании, без дополнительного вызова остались бы пустыми — скрипт дёргает обновление сам.
- Ресайз и перерисовка. При изменении размеров окна Тильда перерисовывает артборд заново; скрипт пересчитывает границы и убирает курсор-«руку» у блока, который на новом разрешении помещается целиком. Повторная инициализация исключена — блок помечается атрибутом, так что при перерисовке обработчики не задваиваются.
- Доступность. Область получает
role, название для скринридеров и фокус по Tab с видимой рамкой. Без этого содержимое, доступное только перетаскиванием, недостижимо для тех, кто не пользуется мышью.
Ограничения
- Прокрутка идёт только вправо и вниз от левого верхнего угла артборда. Объекты, вынесенные левее или выше границ блока, недоступны — это свойство прокрутки, а не скрипта. Стройте композицию от левого верхнего угла.
- Для перетаскивания по вертикали высота блока должна быть фиксированной. В режиме автоматической высоты (hug) артборд просто растёт под содержимое, и прокручивать нечего.
- Скрипт принудительно включает обрезку содержимого для указанного блока. Настройка Тильды «не обрезать содержимое» для него перестаёт действовать: контейнер, который ничего не обрезает, невозможно прокручивать.
- Фоновый цвет блока при перетаскивании остаётся на месте, а фоновая картинка едет вместе с содержимым: Тильда кладёт её в отдельный слой внутри артборда. Если нужен неподвижный фон, задавайте его цветом, а изображение вставляйте объектом Zero-блока.
- Нужны Pointer Events — то есть Safari 13 и новее, все актуальные версии остальных браузеров.
Некодим