Как сделан скролл без скроллбара?

Question

[antimodern]

Как это реализовано?

biron.io/about

Я полагал что где-то убран overflow и потом трансформом двигают контейнер главный с контентом, но я в упор ничего похожено там не вижу. Более того, если я добавлю сам overflow body, html и тд - сролл не появляется. Странно. Как сделано?

Answer 1

[lloydbanks]

Никакой магии. В app.css на 601 строке он просто скрыл скроллбар.

* ::-webkit-scrollbar {
    display: none;
}

Думаю по этой строчке вы догадались, что его нет только в хроме.

Comments

[antimodern]

Точно, в ФФ есть)

Answer 2

[ned4ded]

Он не скрыт, а отключен для вебкита. Если вы зайдете в фаерфокс, то увидите скролл.

Собсвтенно, там отключает скролл псевдоэлемент ::-webkit-scrollbar;

Вот код:

* ::-webkit-scrollbar {
    display: none;
}

Проблема в том, что скролл не ререндерится после дизейбла данного свойства в хроме, а остается невидимым. Видимо, какой-то баг. Если изменить стили таким образом:

* ::-webkit-scrollbar {
    display: block;
    background-color: hsl(240, 100%, 50%);
}

то увидите синюю полоску справа.

Comments

[antimodern]

Опа, точно. в ФФ есть скролл) Спс