Как победить scroll в javascript

Привет, Хабр!

Начать данную статью хотелось бы с небольшого лирического отступления. Недавно, в очередной раз столкнувшись со сложным кейсом на работе и прошерстив добрую половину интернета в поисках истины, попутно приобретя с десяток седых волос, у меня начало болеть сердечко за начинающих специалистов, которые выбрали нелегкий путь разработчика JS. Как вы, вероятно, догадались, сам я не отношусь к категории людей ‘В детстве мама включала мне вместо мультиков курсы Javascript для самых маленьких, в 5 я написал свой интернет магазин,а в 10 в первый раз взломал сайт Пентагона’. Удивительно, но на похожие резюме я не раз натыкался на просторах интернета, те самые 25-ти летние специалисты с 22-х летним опытом на самом деле существуют и, наверное, не имеют тех проблем, с которыми приходится сталкиваться мне — человеку, которому разработка даётся довольно нелегко и который до недавнего времени считал, что нормальный код могут писать только люди со сверхразумом и поэтому боялся даже попробовать. Я считаю, что таких как я на самом деле очень много, особенно учитывая безумный рост популярности программирования (и Javascript в частности) в широких массах в последнее время. Поэтому решил периодически публиковать здесь свои заметки и кейсы, с которыми я сталкивался в работе и которые вызывали у меня определенные трудности, чтобы несколько облегчить жизнь разработчикам, встречающим схожие проблемы.

P.S. я не претендую на экспертность знаний, поэтому, с определенной вероятностью могут найтись куда более оптимальные решения. Помните: ‘Я художник — я так вижу’.

А теперь плавно переходим к теме статьи. Ниже приведен список вопросов, которые я постараюсь осветить в данной заметке:

• Как сделать таблицу с фиксированной шапкой и скроллом в body?

• Как быть, когда cодержимое таблицы съезжает относительно шапки при появлении скролла? Установка css-переменной scroll-width.

• Оптимизация и кастомизация скролла: плавность, scroll margin, изменение цвета и формы.

Как сделать таблицу с фиксированной шапкой и скроллом в body?

Начнем с того, что сделаем самую обыкновенную табличку и заполним ее данными из faker для наглядности. Получаем примерно такую картину(верстку делаем самую базовую, просто чтобы глаз не дергался от одного ее вида):

import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import './index.css';  // генерируем данные const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         <table >           <thead>             <tr>               <th>First</th>               <th>Last</th>               <th>Email</th>             </tr>           </thead>           <tbody>             {users.map(x => (               <tr key={x.id}>                 <td>{x.first}</td>                 <td>{x.last}</td>                 <td>{x.email}</td>               </tr>             ))}           </tbody>         </table> );  render(<App />, document.getElementById('root'));

table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  thead {   background-color: teal; }  td, th {   padding: 15px;   text-align: left; }  th {   color: white; }

Как мы видим, по умолчанию снаружи у нас появился скролл, но нам такая большая таблица не нужна, по условию мы хотим, чтобы скролл у нас был только у тела таблицы, а header над всем этим делом нависал сверху, ну и чтобы в высоту наша табличка была не больше 200 пикселей. В общем, что-то наподобие вот этого:

Нужного нам результата можно добиться несколькими способами:

1. Использовать библиотеку по типу React-Table, React-Virtualized, либо какую-нибудь еще, чтобы вообще не заморачиваться. Настоятельно рекоммендую хотя бы с одной из них ознакомиться, поскольку они очень значительно облегчают жизнь разработчика при работе с таблицами.

2. Немного подшаманить CSS, чем мы сейчас и займемся

Первое,что мне лично пришло на ум, когда я в первый раз столкнулся с подобной задачей — нужно всего лишь поменять свойство display у тегов tbody и thead на ‘block’ и накинуть на tbody ограничение по высоте (здесь я считаю необходимым прояснить небольшой момент, вызывающий трудности у начинающих: многие пытаются просто задать высоту для body, а потом не могут понять, почему это не работает. Нужно просто не забыть еще прописать свойство overflow, и все получится).

Зачем нам менять display? Дело в том, что свойство display у элементов thead и tbody имеет значение row-group(table-header-group и table-row-group соответственно), что в свою очередь не позволяет нам вводить ограничение по высоте, а значит и скролла у них не будет, поэтому мы меняем их на понятный нам display: ‘block’, которым проще управлять .

Здесь есть несколько выжных моментов, о которых не стоит забывать:

1. Меняя свойство display на ‘block’, мы как бы ломаем семантику, и наш браузер уже больше не считает нашу таблицу таблицей, что также оказывает влияние на скринридеры.

2. Теперь наш тег tr уже не занимает все свободное пространство контейнера и теперь нам нужно все это дело выровнять.

import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import './index.css';  // генерируем данные const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         <table >           <thead>             <tr>               <th>First</th>               <th>Last</th>               <th>Email</th>             </tr>           </thead>           <tbody>             {users.map(x => (               <tr key={x.id}>                 <td>{x.first}</td>                 <td>{x.last}</td>                 <td>{x.email}</td>               </tr>             ))}           </tbody>         </table> );  render(<App />, document.getElementById('root')); 

table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  thead {   display: block;   background-color: teal; }  tbody {   display: block;   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  tr {   border: 1px solid black; }  td, th {   text-align: left;   padding: 15px; }  th {   color: white; }

Как будем выравнивать?

В общем, в любой непонятной ситуации используйте Flex или Grid и будет вам счастье. Ниже приведу два готовых базовых примера, html трогать не буду, но я думаю, что и так понятно, что можно сразу верстать на div и маркированных списках при желании. Дальше уже по ситуации можете довести до ума верстку, например: добавить ограничение таблицы по ширине, нужный вам формат переноса строк и адаптив, если конечно он нужен, так как все же в большинстве своем контент таблиц предназначен для использования на больших экранах. В любом случае, более продвинутая верстка легко гуглится.

import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import './index.css';  // генерируем данные const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         <table className='table'>           <thead>             <tr className='header'>               <th className='firstColumn'>First</th>               <th className='secondColumn'>Last</th>               <th className='thirdColumn'>Email</th>             </tr>           </thead>           <tbody>             {users.map(x => (               <tr className='body' key={x.id}>                 <td className='firstColumn'>{x.first}</td>                 <td className='secondColumn'>{x.last}</td>                 <td className='thirdColumn'>{x.email}</td>               </tr>             ))}           </tbody>         </table> );  render(<App />, document.getElementById('root')); 

table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  thead {   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  tr {   display: flex; }  .firstColumn, .secondColumn {   flex: 1; }  .thirdColumn {   flex: 3; }  td, th {   padding: 15px;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; }

import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import './index.css';  // генерируем данные const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         <table className='table'>           <thead>             <tr className='header'>               <th>First</th>               <th>Last</th>               <th>Email</th>             </tr>           </thead>           <tbody>             {users.map(x => (               <tr className='body' key={x.id}>                 <td>{x.first}</td>                 <td>{x.last}</td>                 <td>{x.email}</td>               </tr>             ))}           </tbody>         </table> );  render(<App />, document.getElementById('root'));

table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  tr {   display: grid;   grid-template-columns: 1fr 1fr 2fr; }  thead {   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  td, th {   padding: 15px;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } 

Чуть не забыл отметить одну очень важную вещь, с которой я в свое время достаточно долго пытался разобраться: НА МАКАХ ЕСТЬ ФУНКЦИЯ АВТОМАТИЧЕСКОГО СКРЫТИЯ СКРОЛЛБАРА В БРАУЗЕРАХ, КОТОРАЯ ВЫКЛЮЧАЕТСЯ В НАСТРОЙКАХ. Если вы выставляете overflow: scroll, и ждете, что scroll теперь будет виден постоянно, то на маке он по умолчанию может пропадать и быть видимым только в момент прокрутки. Плюс на маках скролл у нас как бы парит в воздухе над контентом, аналогично position: absolute и не занимает места, если соответствующая настройка включена (по умолчанию она всегда включена).

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

Глядя на результат для windows, мы плавно подходим к следующей теме.

Как быть, когда cодержимое таблицы съезжает относительно шапки при появлении скролла? Установка css-переменной scroll-width

Мы отчетливо видим, что на windows скролл при появлении съедает часть пространства, что в свою очередь приводит к тому, что контент нашей таблицы съезжает относительно шапки. Это лишь один из примеров, но есть и другие кейсы, когда скролл негативно влияет на качество верстки. Казалось бы, проблема очевидная, и наверняка должен быть способ как-то с этим бороться, однако, к сожалению, на данный момент есть только костыльные решения (во всяком случае я не нашел того, что бы меня устроило). Ниже я расскажу о самом распространенном варианте решения данной проблемы, плюс затрону относительно новое CSS свойство, которое должно потенциально избавить разработчиков от этой головной боли.

Ну что ж, приступим! Алгоритм прост и содержит всего лишь 2 шага:

1. Задаем для overflow-y значение scroll, чтобы в любом состоянии скролл у нас присутствовал в таблице (отмечу, что часто дизайнеры не в восторге от такого поворота событий, не по фэншую это всё и всю красоту портит).

2. Высчитываем ширину скролла в браузере и двигаем шапку на нужное расстояние.

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

Как посчитать размер скролла и положить его в css-переменную?

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

const setScrollbarWidth = () => {   // Создаем контейнер-болванку   const outerContainer = document.createElement('div');      //Накидываем стили   outerContainer.style.visibility = 'hidden';    outerContainer.style.overflow = 'scroll';      //Добавляем его к body   document.body.appendChild(outerContainer);      // Создаем еще один контейнер и помещаем его внутрь outerContainer   const innerContainer = document.createElement('div');    outerContainer.appendChild(innerContainer);        // Высчитываем ширину нашего скроллбара   const scrollbarWidth =    (outerContainer.offsetWidth - innerContainer.offsetWidth);     // Создаем css-переменную    document.documentElement.style.setProperty('--scroll-width',    `${scrollbarWidth}px`);       // Удаляем наш контейнер-болванку   outerContainer.parentNode.removeChild(outerContainer);  }

Теперь нам остается только вызвать функцию при загрузке приложения и использовать значение ширины скролла в нужном нам месте. Если кто-то ранее не сталкивался с  css-переменными, то можете поискать на хабре, тут есть неплохие статьи на эту тему с большим кол-вом примеров. Использовать css-переменные очень просто:

padding-right: var(--scroll-width)

Применяя все вышеописанное к моему изначальному коду получаем:

import React, { useEffect } from "react"; import { render } from "react-dom"; import faker from "faker"; import "./index.css";  const setScrollbarWidth = () => {   const outerContainer = document.createElement("div");    outerContainer.style.visibility = "hidden";   outerContainer.style.overflow = "scroll";    document.body.appendChild(outerContainer);    const innerContainer = document.createElement("div");   outerContainer.appendChild(innerContainer);    const scrollbarWidth =     outerContainer.offsetWidth - innerContainer.offsetWidth;    document.documentElement.style.setProperty(     "--scroll-width",     `${scrollbarWidth}px`   );    outerContainer.parentNode.removeChild(outerContainer); };  // генерируем данные const users = Array(100)   .fill(null)   .map(() => ({     id: faker.random.uuid(),     first: faker.name.firstName(),     last: faker.name.lastName(),     email: faker.internet.email()   }));  const App = () => {   useEffect(() => setScrollbarWidth(), []);    return (     <table className="table">       <thead>         <tr className="header">           <th>First</th>           <th>Last</th>           <th>Email</th>         </tr>       </thead>       <tbody>         {users.map((x) => (           <tr className="body" key={x.id}>             <td>{x.first}</td>             <td>{x.last}</td>             <td>{x.email}</td>           </tr>         ))}       </tbody>     </table>   ); };  render(<App />, document.getElementById("root")); 

table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  tr {   display: grid;   grid-template-columns: 1fr 1fr 2fr; }  thead {   padding-right: var(--scroll-width);   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: scroll;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  td, th {   padding: 15px;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } 

В очередной раз хочу напомнить, что на маке ничего съезжать не будет по умолчанию, но если уж вы включите скролл в настройках, то предложенное мной решение также отлично отработает и всё будет ровненько.

Раньше было еще одно решение данной проблемы — использование overflow в значении overlay, что позволяло сделать скроллбар примерно таким же, как сейчас на маках, т.е. не занимающим места (поверх контента), однако это свойство устаревшее и использовать его — это очень плохая идея.

Можно ли каким-то образом все-таки избежать использования overflow: scroll?

Ответ: в данной ситуации можно, нужно всего лишь немного усовершенствовать наш костыль.

Алгоритм действий:

1. Объявляем отдельный класс с нашим padding

2. Меняем overflow на auto (чтобы скролл появлялся только по необходимости)

3. При загрузке страницы определяем ширину шапки и body

4. Используем classnames, чтобы установить условие на добавление нашего новго класса к шапке: ширина body не должна быть равна ширине шапки (то есть мы добавляем сдвиг, только если в body есть scroll). Для удобства храним результат проверки в стэйте.

import React, { useEffect, useState } from "react"; import { render } from "react-dom"; import faker from "faker"; import cx from "classnames"; import "./index.css";  const setScrollbarWidth = () => {   const outerContainer = document.createElement("div");    outerContainer.style.visibility = "hidden";   outerContainer.style.overflow = "scroll";    document.body.appendChild(outerContainer);    const innerContainer = document.createElement("div");   outerContainer.appendChild(innerContainer);    const scrollbarWidth =     outerContainer.offsetWidth - innerContainer.offsetWidth;    document.documentElement.style.setProperty(     "--scroll-width",     `${scrollbarWidth}px`   );   outerContainer.parentNode.removeChild(outerContainer); };  // генерируем данные const users = Array(30)   .fill(null)   .map(() => ({     id: faker.random.uuid(),     first: faker.name.firstName(),     last: faker.name.lastName(),     email: faker.internet.email()   }));  const App = () => {   const [isShiftAllowed, setIsShiftAllowed] = useState(false);    useEffect(() => {     setScrollbarWidth();     const headerWidth = document.querySelector(".header").clientWidth;     const bodyWidth = document.querySelector(".body").clientWidth;     headerWidth - bodyWidth !== 0       ? setIsShiftAllowed(true)       : setIsShiftAllowed(false);   }, []);    return (     <table className="table">       <thead className={cx({ shift: isShiftAllowed })}>         <tr className="header">           <th>First</th>           <th>Last</th>           <th>Email</th>         </tr>       </thead>       <tbody>         {users.map((x) => (           <tr className="body" key={x.id}>             <td>{x.first}</td>             <td>{x.last}</td>             <td>{x.email}</td>           </tr>         ))}       </tbody>     </table>   ); };  render(<App />, document.getElementById("root")); 

 table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  .shift {   padding-right: var(--scroll-width); }  tr {   display: grid;   grid-template-columns: 1fr 1fr 2fr; }  thead {   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  td, th {   padding: 15px;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } 

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

Я упоминал о том, что есть новое css свойство, которое может стать настоящим спасением в данном вопросе, имя ему scrollbar-gutter. Еще раз повторюсь, это новое свойство, и на данный момент оно поддерживается только браузерами Opera, Chrome и Edge, так сказать still work in progress. Как объясняется в MDN, scrollbar gutter — это собственно и есть контейнер, в котором лежит наш бегунок скроллбара (если конечно overflow не находится в значении overlay). Соответственно, комбинирование значений данного свойства со значениями свойства overflow позволит гибко управлять поведением этого контейнера, резервировать место и т.д. Очень надеюсь, что в ближайшем будущем его наконец полноценно допилят.

Заметка получилась уже довольно большой, но у нас осталась еще одна тема, потерпите еще немного, постараюсь написать чего-нибудь интересненького.

Оптимизация и кастомизация скролла.

Большую часть информации для данного раздела я подчеркнул из статей, автором которых является Josh W Comeau, всем рекоммендую посетить его вебсайт https://www.joshwcomeau.com/, там вы найдете очень много полезностей.

Добавляем плавность

Возможно, глядя на заголовок, кто-то из вас сейчас сидит в недоумении: ‘Плавность? Скролл ведь и так плавный, о чем ты?’. Так-то оно так, но я вот о что имею ввиду: все мы прекрасно знаем о том, что в html можно сделать ссылку-якорь, чтобы при клике на заголовок перемещаться к нужному фрагменту текста, самый базовый пример можно найти на всеми любимой википедии:

Как мы видим, перемещение происходит мгновенно, однако мы можем сделать этот переход плавным с помощью CSS (возможно это для вас конечно не новость, но кому-то точно будет полезно). Для этого нам нужно использовать вот этот кусочек кода:

@media (prefers-reduced-motion: no-preference) {   html {     scroll-behavior: smooth;   } }

Теперь то же действие на страничке википедии происходит таким образом:

Кстати говоря, если вдруг кто-то не знал, в Chrome devtools можно также добавлять media queries. Вот здесь можно найти подробную инструкцию о том, как это сделать: https://daveceddia.com/inspector-stylesheet-chrome/. Кейс супер редкий, но мало ли, вдруг понадобится.

На мой взгляд более плавное перемещение при клике на ссылку-якорь выглядит куда приятнее и позволяет лучше ориентироваться на странице, да и поддерживается достаточно хорошо, не работает лишь в Internet Explorer и SAFARI.

Отмечу также важный момент: если вы добавляете scroll-behavior: smooth в html, то имейте ввиду, что это автоматически также аффектит поведение метода window.scrollTo (тоже становится плавным), который используется, например, для того чтобы переместить пользователя наверх страницы в ответ на submit. Если вдруг вы раньше не сталкивались с этим методом, то обязательно ознакомьтесь и также не забудьте про метод scrollIntoView (разница между ними в том, что первый оперирует пикселями, а второй перемещает к конкретному элементу).

Scroll margin

Как мы видели на примере выше, при клике на ссылку-якорь наша страничка прокручивается таким образом, что нужный нам текст оказывается в самом верху экрана. Однако, если у нас имеется header со свойством position в значении sticky или fixed, то часть нужного нам контента обязательно заползет под него и нам придется после этого скроллить страничку вверх, чтобы этот самый контент стало видно.

Здесь нам поможет использование свойства scroll-margin-top, которое определяет, где элемент должен находиться относительно верхней части окна при прокрутке. Со значением нужно поэкспериментировать и подобрать подходящее под вашу конкретную ситуацию.

Изменение цвета.

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

Возможно вы уже сталкивались со свойтвом scrollbar-color, которое позволяет изменить цвет скроллбара, только вот к сожалению поддерживается оно только браузером Firefox.

body {   scrollbar-color: color1 color2; }

Это конечно здорово, но сразу возникает вопрос: ‘Есть ли альтернатива для остальных браузеров? ‘ Альтернатива есть и имя ей: Vendor-prefixes.

::-webkit-scrollbar {   /* Цвет контейнера */   background-color: color2; } ::-webkit-scrollbar-thumb {   /* Цвет ползунка */   background-color: color1; }

Однако, стоит отметить, что если мы изменим цвет таким образом, то результат будет достаточно топорным для остальных браузеров, так как мы затираем стандартные свойства скроллбара. Вот вам для примера сравнение результата в браузерах Chrome и Firefox:

Чтобы сделать картинку получше и добиться примерно одинакового внешнего вида в разных браузерах, нам нужно накинуть дополнительных стилей (на наше счастье псевдоэлемент -webkit-scrollbar позволяет нам это сделать):

<style>   html {     --background: hsl(210deg, 15%, 6.25%);     --text: hsl(210deg, 10%, 90%);     --gray-300: hsl(210deg, 10%, 40%);     --gray-500: hsl(210deg, 8%, 50%);      /* Official styles (Firefox) */     scrollbar-color:       var(--gray-300)       var(--background);     scrollbar-width: thin;   }    ::-webkit-scrollbar {     width: 10px;     background-color: var(--background);   }   ::-webkit-scrollbar-thumb {     border-radius: 1000px;     background-color: var(--gray-300);     border: 2px solid var(--background);   }   /*     Little bonus: on non-Firefox browsers,     the thumb will light up on hover!   */   ::-webkit-scrollbar-thumb:hover {     background-color: var(--gray-500);   } </style>

Ну вот и все, друзья мои, я рассказал вам обо всех моментах, которые раньше у меня вызывали определенные трудности. Данная заметка — это определенно всего лишь ‘Капля в море’ и у вас 100% найдется еще большое количество вопросов и разного рода уточнений, a также замечаний, надеюсь увидеть их в комментариях (я пока еще учусь, так что не судите строго).

В дальнейшем попробую еще написать набольшую заметку про 2 другие интересные темы, касающиеся скролла: Cumulative Layout Shifts и Scroll Snapping.

Очень надеюсь, что вам было хоть немного полезно и интересно!