Будни разработчика

Стилизация тултипов Два года назад я писал о проблеме с title и о принятом рабочей группой CSS предложении добавить псевдо-элемент ::tooltip от Лии Веру. Похоже, команда Edge займётся тултипами, о чём можно судить по статье Патрика Броссета.

Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться

Общая практика такова, что стоит избегать использования атрибута title из-за ряда проблем. Патрик описывает эти проблемы в статье. Текущее решение команды Edge — добавить опциональный «сброс», как это сделано в стилизуемом <select>:

<style>
  /*
  Новый псевдо-элемент,
  выбирает все тултипы
  */
  ::tooltip {
    /* Включение стилизации */
    appearance: base;
    /* Стили тултипа */
  }
</style>
<button title="Это тултип">
  Наведи на меня
</button>

Свойство appearance: base включает стилизацию. Системный тултип заменяется на псевдо-элемент с базовыми стилями. Он привязан к элементу с помощью Anchor Positioning и работает под капотом на основе Popover API и Interest Invokers. Это решает многие проблемы с тултипом title: - Появляется при наведении и фокусе; - Стилизуется как обычный псевдо-элемент; - Задержка появления контролируется свойством interest-delay; - Реагирует на изменение размера шрифта; - Закрывается при нажатии Esc; - Можно навести курсор на контент. Но некоторые проблемы доступности не решаются. Вспомогательные технологии работают с title непоследовательно. Кроме того, в сообществе есть стойкое убеждение, что title это плохо и его не стоит использовать. В качестве альтернативы предлагается новый атрибут tooltip. Он работает как title, но без отображения системного тултипа, с определённой семантикой и связями и ограничен <button>, <a>, <input>, <textarea>, <select>:

<style>
  ::tooltip {
    /* Стили тултипа */
  }
</style>
<button tooltip="Это тултип">
  Наведи на меня
</button>

С точки зрения доступности рекомендации для стилизуемых тултипов выглядят так: - Не переопределяют имя элемента; - Встроенная роль tooltip; - Элемент ссылается на тултип через aria-describedby. Но есть и другой способ создания тултипов — сочетание уже существующих Popover API и Interest Invokers. Вместо атрибута можно использовать элемент, связать его с триггером через Anchor Positioning и добавить поведение через атрибуты:

<!--
interestfor связывает кнопку
с тултипом и отображает
при наведении и фокусе
-->
<button
  interestfor="my-tooltip"
  aria-describedby="my-tooltip"
>
  Наведи на меня, у меня есть тултип с HTML
</TMLbutton>
<!--
popover делает элемент
всплывающим и позволяет
добавить любой контент
-->
<div
  id="my-tooltip"
  popover
  role="tooltip"
>
  Это тултип с <span>HTML</span>
</div>

В свежем 547 выпуске Веб-стандартов обсуждалась статья Патрика. Ведущие задались вопросом: зачем нам два разных способа создания тултипов, когда Popover и Interest Invokers решают задачу? Я вижу это как решения разных задач. Простые задачи должны решаться просто. Атрибут title/tooltip и псевдо-элемент ::tooltip как раз для простых задач, где нужно вывести короткий текст или подпись к элементу. Браузер сам сделает магию связывания и доступности. В более сложных сценариях, когда нужны тултипы с HTML или тонкий контроль, в дело вступают Interest Invokers. Но с ними нужно больше повозиться, чтобы сделать хорошо. Часть магии браузера не будет автоматически применяться. Поэтому нужно вручную: - Добавить отдельный элемент с popover, id и role; - Позиционировать тултип относительно триггера через Anchor Positioning; - Добавить триггеру interestfor и aria-describedby; - Стилизовать тултип. Это немного больше работы, чем просто указать текст в атрибуте и стилизовать в CSS через псевдо-элемент. Поэтому оба подхода уместны на мой взгляд. Патрик пишет, что даже стили остаются, меняется только селектор. Можно оставить обратную связь по предложению Edge. #html #css #ui

О господи, да неужели я при жизни увижу стилизацию title?!!

#инструмент дня Промо-видео на Rust. Вот до чего техника дошла Давно знал об FFrames — фреймворке, в котором видео описывается кодом: Rust отвечает за логику и анимации, SVG — за графику, GPU — за рендер. Но всё никак не доводилось попробовать. Ну как, не доводилось... я не особо понимал, а что там делать и как. Но решился. Попробовал на промо для своего пульта. Дал Codex взять настоящие скриншоты и попросил собрать 15-секундный ролик. Самое интересное — как он это делает. Интерфейс разбирается на кусочки: кнопки пульта, круг навигации, плитки приложений, диалог ввода, клавиатуру. Каждый элемент становится отдельным слоем со своим временем появления, масштабом, прозрачностью и движением. На каждом кадре Rust пересчитывает эти параметры. FFrames рисует результат и собирает MP4. На Mac используется Metal. Например, вот так заголовок плавно поднимается на место за полсекунды:

let y = frame.animate(&fframes::timeline!(
    at 0.0 => 0.5, animate 200.0_f32 => 120.0,
    fframes::animation::Easing::EaseOut,
));

fframes::svgr!(
    <text x="80" y={y} font-size="64" fill="#fff">
        "Всё есть код."
    </text>
)

Наш ролик: 886×1920, 30 fps, 450 кадров. Сам экспорт после сборки проекта занял около пяти секунд. Все сцены, тексты и переходы лежат в исходниках. Можно хранить проект в Git, смотреть изменения и переиспользовать анимации для следующих роликов. Причём самому писать Rust необязательно: говоришь агенту «кнопки пусть появляются по очереди», «телефон крупнее», «убери музыку» — он правит код и пересобирает видео. Но API настолько простой, что поправить что-то проблем вообще не составляет. По пути узнал, что аналогичные видео Codex по-умолчанию создаёт на Python + Pillow, но это чуть менее эффективно. Короче, такое монтирование видео мне очень и очень нравится. 🎞 Сайт 🐙 GitHub Всё есть код, котаны. #rust #fframes

#ссылка дня В комментариях к посту про моргающее меню а-ля macOS HIG всплыл вопрос: а есть ли вообще ресурсы, где можно подсмотреть, как одни и те же интерфейсные штуки сделаны в разных продуктах? Есть как минимум два. На самом деле их сотни были и есть, но почти все достаточно банальны. Я решил отобрать два из разных миров. Refero Styles собирает стили реальных продуктов. Сейчас там уже больше 2000 примеров: цвета, типографика, отступы, компоненты и прочие детали. Причём всё это ещё и упаковывается в DESIGN.md, который можно скормить Cursor, Claude Code, Codex или чему-нибудь ещё и попросить делать «примерно вот так». А The Component Gallery заходит с другой стороны: выбираешь конкретный компонент — tabs, accordion, popover, pagination — и смотришь, как он устроен в разных дизайн-системах. Сейчас там 60 типов компонентов, 95 дизайн-систем и больше 2600 примеров. По сути, это та самая витрина компонентов, которая когда-то была одной из самых полезных частей Storybook Component Encyclopedia. Сам Storybook с тех пор ушёл гораздо дальше в сторону полноценной инфраструктуры для разработки, тестирования и документации, а простое «покажи мне двадцать разных tabs рядом» стало искать заметно сложнее. Так что Refero — скорее про стиль целиком, Component Gallery — про конкретный паттерн. Для вопроса «а как вообще принято делать вот эту штуку?» оба отлично подходят. #design #skill

⚡️ JavaScript, архитектура и ИИ: о чем будут говорить на юбилейной HolyJS 2026 Autumn 📆 23-24 октября в Санкт-Петербурге и онлайн пройдет юбилейная HolyJS 2026 Autumn — IT-конференция для всех, кто использует JavaScript-технологии для фронтенда и бэкенда.  В этом году в программе остается все, за что любят HolyJS: JavaScript, браузер, React, архитектура, производительность и инструменты. Но все это теперь существует в мире, где ИИ становится частью разработки — от написания кода до проектирования и работы с production. Поэтому в программе есть и фундаментальный JS-инжиниринг, и практические кейсы с ИИ, и доклады, после которых можно сразу что-то попробовать в работе. А еще — воркшопы, где про новые подходы можно не только послушать, но и «потрогать» их руками. Полное расписание и подробности смотрите в карточках и на сайте. 🌟По промокоду htmlshit персональные билеты дешевле Купить билет Реклама. ООО «Джуг Ру Груп». ИНН 7801341446

#фишка дня Давайте выкладывать код вместе с видео! Немного раздражает, когда показывают красивый эффект, но оставляют только видео. Посмотреть можно, а понять, как повторить и что именно менять, — уже сложнее. Давайте исправлять: к ролику добавлять рабочий пример и короткий разбор. Например, эффект с надписью PRO собран из нескольких простых приёмов SVG: 1. Буквы сведены к одному силуэту, поэтому фильтр обрабатывает их как цельную форму. 2. Размытие альфа-канала и композиция создают внутреннюю тень. 3. По буквам движется повторяющийся градиент — он задаёт светлые и тёмные участки. 4. feComponentTransfer переводит оттенки в цвет по таблицам RGB. 5. На финальном шаге контур возвращает буквам чёткость, а зерно добавляет фактуру. Цвет контура зависит от градиента и меняется вместе с ним. Хороший пример показывает результат по этапам: включил шаг — увидел, что он добавил. Ещё полезно приложить минимальный запускаемый код, дать менять параметры и отметить, если часть значений пришлось восстановить приблизительно. Собственно, вот вам хороший пример от меня: https://codepen.io/editor/alinaki/pen/01a0f735-901e-7978-a733-f7e89bd82597 Видео хорошо передаёт движение. Демо и код помогают разобраться, повторить и поэкспериментировать. Хотелось бы, чтобы и публиковали их вместе. #css #svg #effect #animation

#фишка дня Каждому смотрящему сериалы известно, что один из самых лучших способов сделать текст субтитров видимым на практически любом фоне — это добавить инверсную обводку. Белый контур для чёрного текста, чёрный — для белого (внезапно). Есть ли что-то подобное в CSS? Ну, конечно, есть! Как минимум, можно бросить тень aka text-shadow. Правда, синтаксис не очень интуитивный да и выглядит иногда странненько. Какие ещё варианты? SVG text, очевидно, но там свои нюансы с доступностью и стилями. И есть ещё! -webkit-text-stroke-color Несмотря на префикс, Firefox тоже его поддерживает (спорное решение, но уж как есть). Вот только как всегда есть нюанс. По-умолчанию, обводка будет нарисована перед слоем с текстом. Это очевидно, если понимать разницу между штрихом (stroke) и обводкой (outline), но всё же. Поэтому paint-order: stroke нам в помощь! Таким образом, штрих будет отрисован первым, натуральным образом превратившись в обводку (при достаточной толщине, конечно же):

  -webkit-text-stroke-color: white; 
  -webkit-text-stroke-width: var(--stroke); 
  paint-order: stroke;

#css #stroke #outline

Котаны, вам ещё и скидка по промокоду htmlshit, налетайте!

👨‍💻 Фронтенд с AI: что можно делегировать агентам 5 октября, стартует конференция Podlodka Frontend Crew — сезон о том, как применять AI во фронтенд-разработке на практике. Участники конференции узнают: • Как находить prompt injection и противостоять таким атакам; • Какие подходы помогают повысить доверие к результатам агентской разработки; • Как проводить ревью кода, созданного AI-агентами; • Как AI помогает упростить починку багов. В программе ещё много практических кейсов. Также нужно отметить, что у конференции очень удобный формат. Это пять дней Zoom-сессий по утрам и вечерам и закрытое Telegram-комьюнити, где можно обсудить новый опыт и узнать от единомышленников то, что не догадаешься спросить у своей LLM. Приходите, чтобы разобраться, какие задачи уже можно делегировать AI, где важно сохранять контроль и как выстроить системную работу с AI в команде или проекте. 🔗 Программа и билеты: https://podlodka.io/fecrew

Если хочется немного обновить свою Telegram-ленту, собрали папку RIA — Recommended Iconic Authors. Внутри в основном авторские IT-каналы: разработка, инструменты, библиотеки, релизы, заметки из реальной работы и всё то, что обычно интереснее очередного пересказа документации. Разумеется, без AI тоже никуда: чат-боты, агенты, вайбкодинг и прочие способы заставить компьютер работать вместо себя хотя бы несколько минут. Есть QA, информационная безопасность и просто хорошие технические каналы, где авторы не только пишут посты, но и отвечают в комментариях и обсуждениях. В общем, вот папка. Подписываться на всё подряд не обязательно — можно спокойно выбрать то, что действительно хочется читать.

#фишка дня На macOS пункт меню после клика не исчезает сразу. Сначала выбранный пункт коротко моргает: подсветка пропадает, возвращается — и только потом меню закрывается. Так система успевает показать, какой именно пункт сработал. В вебе меню обычно закрывается в момент клика, поэтому этого подтверждения нет. На CSS сам эффект делается просто:

.menu-item:target {
  animation: blink 150ms linear;
}

.menu:has(.menu-item:target) {
  animation: close 150ms step-end forwards;
}

То есть выбранный пункт моргает, а меню ждёт те же 150 мс перед скрытием. Вот даже собрал кодпен с примером: https://codepen.io/editor/alinaki/pen/01a0f12b-8d69-7192-90d7-b8b7562ef482 Без JavaScript это можно собрать через :target и :has(): выбранный пункт хранится в URL fragment. Для демки подходит отлично, для обычного компонента я бы всё-таки оставил состояние и закрытие на JS, а blink — в CSS. Apple отдельно описывает такую обратную связь в HIG: https://developer.apple.com/design/human-interface-guidelines/feedback Такая-то мелочь, а насколько сильно меняется восприятие! #css #macos #hig

#инструмент дня Забайтил твиттер этим скриншотом с успехом аж на 55 тысяч просмотров. На скриншоте изображён стрим экрана моего iPhone в приложении Device Hub. И чо? А в то, что в Евросоюзе приложение iPhone Mirroring для управления телефоном с ноутбука отключено уже второй год. И нюанс тут вот в чём: причина отсутствия Mirroring — не техническая. Apple упирается в DMA, а конкретно в требования к interoperability. Если Apple даёт своему Mac особый доступ к возможностям iOS, сторонние производители тоже могут потребовать сопоставимый доступ. Сама Apple прямо пишет, что пока не нашла безопасного способа открыть iPhone Mirroring для non-Apple devices, не подвергая риску данные на телефоне. Поэтому в ЕС функцию просто не выпускают. А Device Hub — пожалуйста. Это инструмент разработчика, поэтому он живёт совсем в другой плоскости. Подключаешь физический iPhone, получаешь его экран прямо на Mac и можешь тыкать мышкой, печатать с клавиатуры и гонять приложение на настоящем устройстве, почти не трогая сам телефон. Для отладки это, кстати, более чем круто. Симулятор симулятором, но возможность держать реальный девайс прямо рядом с Xcode сильно приятнее. Обычный iPhone Mirroring он, конечно, не заменяет. Нет всей системной интеграции, уведомлений и сценария «телефон валяется где-то в квартире, а я пользуюсь им с Mac». Зато картинка получается прекрасная: в ЕС нельзя зеркалить iPhone на Mac. Если только очень надо по работе. #ios #iphone #apple #eu

#заметка дня Позабытый формат В комментариях к свежему Subversion спор про Git и централизованные VCS. На моей первой работе — 2009 год — мы использовали svn. И стыдно не было. У Git довольно специфическое происхождение: его делали не как универсальный инструмент для всех разработчиков, а под конкретное устройство Linux. Специфику и размер. CVS и SVN предполагали/предполагают одну главную историю на сервере. Для обычной команды это вполне логично. У Linux была и есть другая структура: тысячи разработчиков, мейнтейнеры подсистем, несколько уровней доверия. Изменения идут от автора к мейнтейнеру, от него выше и в конце концов к Линусу. С одним центральным репозиторием сразу возникает вопрос: кому разрешено туда писать? Всем нельзя, одному Линусу — бессмысленно. Поэтому Linux сначала перешёл на BitKeeper, где у каждого мейнтейнера мог быть свой полноценный репозиторий, а изменения передавались дальше по цепочке. В 2005 году бесплатный BitKeeper для Linux закончился, и Линус написал Git. Требования были вполне приземлённые: быстро работать с огромным проектом, нормально переживать множество параллельных веток и не требовать единого сервера для каждого коммита. Человек ведёт свою историю сам, а другой человек решает, забирать её к себе или нет. Git при этом сначала был скорее механизмом работы с историей, чем аккуратно спроектированным пользовательским инструментом. Интерфейс достраивали уже потом. Этим хорошо объясняются index, HEAD, несколько видов reset, reflog и прочие вещи, которые приходится отдельно учить даже после многих лет работы. Потом появился GitHub. Git уже был, но совместная работа вокруг него требовала заметно больше ручной возни. GitHub собрал в одном месте репозитории, форки, просмотр кода, обсуждения и pull requests. Именно после этого Git стал удобен не только как VCS, но и как основа всей работы вокруг кода. А дальше Git просто стало трудно не выбрать. На нём жил open source, его знали разработчики, его поддерживали IDE, CI и хостинги. При этом Subversion не превратился в мусор: если проекту важнее централизованный контроль, частичная выдача огромного дерева или работа с тяжёлыми бинарниками, такая модель до сих пор может быть удобнее. Кто-то из вас, котаны, застал или сидит до сих пор на svn? Иллюстрация: GitKraken. #svn #git

#релиз дня Яндекс выложил в открытый доступ новую базовую модель Alice AI — AliceAI-Foundation-80B-A3B-Base. Веса доступны под Apache 2.0. И это не доработка чужих весов: модель полностью обучили с нуля. Turing Post включил её в подборку ключевых моделей недели, а техрук из Google DeepMind выделил Alice AI как запуск, доказывающий тренд на то, что небольшие и эффективные модели уже сейчас меняют всю экономику AI. По сравнению с предыдущей Alice AI LLM она стала заметно компактнее: 80 млрд параметров вместо 235 млрд, а при генерации благодаря Mixture of Experts активируется только 3 млрд. Основной претрейн — 17,5 трлн токенов, рабочий контекст — 128K, максимальный — 256K+. Яндекс исторически имел сильную экспертизу именно в русском языке — от поиска и морфологии до перевода и голосовых технологий, так что здесь вполне ожидаемо решили давить в ту же сторону. Для новой модели отдельно собирали данные под русскоязычные запросы, усиливали фактологию, образование, российскую историю, медицину и право. Параллельно в сам претрейн добавили больше математики, программирования и STEM-задач, чтобы заготовить основу для reasoning ещё до последующего дообучения. На опубликованных компанией тестах это дало особенно сильные результаты в русскоязычных задачах: модель заняла первое место на 8 из 10 бенчмарков на факты, образование и экспертные знания среди сравниваемых открытых претрейнов. При этом Foundation — не финальный вариант, а полигон для следующего поколения моделей. На ней проверяют архитектуру, данные и подходы к обучению, которые потом должны лечь в основу более сложного reasoning и агентных возможностей.

#библиотека дня Poimandres снова на коне: заваншотили (на самом деле нет) математическую библиотеку для веба. Шутку про Opus авторы уже успели пошутить сами. Пакет ставится как npm i math. Имя math на npm им отдал Kaleb Hornsby. Репозиторий при этом старый и несколько лет толком не обновлялся. Теперь проект заметно переделали и выпустили math v0.1.0. Возможностей навалили с верхом: векторы, матрицы и кватернионы, 2D/3D-геометрия, raycast и frustum, triangulation и quickhull, easing и springs, seeded random, несколько видов noise, цвета и inverse kinematics. API сделан с расчётом на производительность. Функции пишут результат в переданный out, а не создают новый объект на каждом вызове, данные остаются обычными массивами, формат аргументов и возврата един. Плюс всё разбито на отдельные точки входа и нормально тришейкится. Поэтому использовать math можно хоть с WebGL, хоть с WebGPU, Wasm или собственным рендерером — библиотека сама не тащит за собой ещё один объектный мир. Ну и без AI-обвязки релиз теперь, видимо, считается незаконченным: вместе с библиотекой положили /math skill, который объясняет coding agent, как пользоваться API и писать более экономный по памяти data-oriented код. https://github.com/pmndrs/math #math #library

#фишка дня Вот такой короткий набор CSS правил позволит текстовому полю расти вместе со вводом пользователя, но не выше определённого значения:

𝚝𝚎𝚡𝚝𝚊𝚛𝚎𝚊 {
  𝚏𝚒𝚎𝚕𝚍-𝚜𝚒𝚣𝚒𝚗𝚐: 𝚌𝚘𝚗𝚝𝚎𝚗𝚝;
  𝚖𝚊𝚡-𝚑𝚎𝚒𝚐𝚑𝚝: 𝟻𝚕𝚑;
}

Современные единицы измерения, конечно, крутая штука :) Автор #css #textarea #lh

#статья дня Ахмад Шадид придумал, как на CSS определить, что два элемента начинают пересекаться. Задача вроде простая: есть декоративный элемент, его позиция и размер плавают, рядом контент. Нужно скрыть декор не по @media, а именно когда между ними заканчивается место. Решение довольно извращённое: через Anchor Positioning он создаёт невидимый .measure между элементами, добавляет туда псевдоэлемент фиксированной ширины и ждёт, когда контейнер начнёт overflow'иться. Дальше Scroll-driven Animations используются вообще не для анимации, а как детектор этого overflow: timeline переключает CSS-переменную, а style query уже скрывает нужный элемент. То есть CSS всё ещё не умеет спросить «эти два элемента пересеклись?», но если достаточно долго смотреть на Anchor Positioning, timeline-scope, overflow и container queries — оказывается, можно заставить его ответить. Поддержка, разумеется, пока не универсальная, поэтому сам Шадид рассматривает это как progressive enhancement. Ссылка: https://ishadeed.com/article/css-detect-overlap/ #css #scroll #overlap

#релиз дня Похоже, следующим коллегой разработчика станет не один ИИ-агент, а целая команда роботов. В SourceCraft от Яндекса появилась возможность подключать автономных ИИ-агентов, которым можно поручать задачи прямо в обсуждениях GitLab. Причём это не очередной чат, в который нужно вручную копировать код и контекст. Агент работает под собственной учёткой, получает задачу, самостоятельно её выполняет и возвращает результат на ревью. Самое интересное — что происходит, если в процессе что-то пошло не так. Не хватает данных или нужно согласовать решение? Агент сам обращается к команде. То есть разработчик распределяет работу между ИИ-исполнителями, подключается к сложным решениям и проверяет результат. Не то чтобы разработчиков избавили от общения, конечно. Просто теперь ещё один участник будет писать в треде :) Агенты могут заниматься разработкой, проверкой безопасности кода и другими задачами. Работать с ними можно не только через GitLab, но и из VS Code, командной строки, мессенджеров и веб-интерфейса SourceCraft. При этом компании смогут подключать собственных агентов, в том числе созданных в Yandex AI Studio, и настраивать их под конкретные процессы разработки. И вот тут, кажется, самое интересное. Получается уже не помощник, которому время от времени пишут промпты, а отдельный контур разработки, где над проектом одновременно работают люди и несколько ИИ-агентов. То есть агенту теперь мало уметь писать код. Нужно ещё научиться нормально работать с коллегами. #ai #agents #sourcecraft

#инструмент дня Кто-нибудь, остановите это безумие! Очередная библиотека подсветки синтаксиса — twinkleplop. Очередные рекорды скорости и размера побиты! Очередное API улучшено. Можно конечно попробовать разобрать архитектуру, например: в основе твинклплопа — конечный автомат. Но кому это интересно? Не, если кому-то интересно, вот: https://twinkleplop.pngwn.at/docs/architecture Но лично меня распёрло от их мини-игры на главной странице :) Я вот в 50 секунд уложился. #tool #syntax #highlight

#статья дня Polypane выпустили прекрасную статью о том, что вы все делаете скролл на страницах неверно. А точнее, как делать верно. Суть — сплошь и рядом ломаете прокрутку на body. У страницы в браузере есть специальный root scroller — тот самый скролл всего документа. И браузер умеет для него заметно больше, чем для обычного div с overflow: auto: восстанавливает позицию после перехода назад, прокручивает страницу с клавиатуры, обслуживает window.scrollY / scrollTo, нормально делает печать и полностраничные скриншоты. На мобильных от него ещё зависят схлопывание адресной строки, tap-to-top на iOS и pull-to-refresh. Проблема в том, что отказаться от всего этого очень легко. Классический app shell: html, body { height: 100%; overflow: hidden } и потом height: 100vh; overflow: auto на wrapper — визуально страница продолжает совершенно нормально скроллиться, только теперь скроллится не документ, а вложенный контейнер. Ещё более неприятный вариант — сочетание height: 100% и overflow-x: hidden: из-за правил overflow body тоже может незаметно превратиться в scroll container. Проверяется смешно просто: прокрутить страницу и посмотреть window.scrollY. Если там всё ещё 0, скроллится что-то другое. Автор дальше разбирает типичные случаи — full-height layout, fixed header/sidebar, горизонтальный overflow, блокировку скролла под modal — и показывает, как оставить основной скролл браузеру. Например, использовать min-height: 100svh вместо фиксированного 100vh, position: sticky вместо app shell с отдельным скроллом, а для обрезки горизонтального overflow — clip вместо hidden. Ссылка ещё раз: The root scroller and how not to lose it #css #scroll #root #appshell