Css полоса прокрутки: Как стилизовать или убрать полосу прокрутки — CSS скроллбар — Active-Vision

Как стилизовать полосы прокрутки с помощью CSS • Full-Arts

Содержание статьи

Вы когда-нибудь посещали веб-сайт с пользовательской полосой прокрутки и задавались вопросом, как они это сделали? Прочитав эту статью, вы сможете понять все о настройке и стилизации полос прокрутки с помощью CSS.

Плюсы и минусы пользовательской полосы прокрутки

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

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

С другой стороны, многие дизайнеры пользовательского интерфейса считают, что вы никогда не должны вмешиваться в «стандартизированные» компоненты пользовательского интерфейса, такие как полоса прокрутки. Если вы слишком сильно измените полосу прокрутки, это может запутать людей, использующих ваш веб-сайт или приложение.

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

С другой стороны, если вы думаете о внедрении пользовательской полосы прокрутки на работе или в каком-то проекте, где вы хотите зарабатывать деньги, вам следует попробовать A/B-тестирование и принять решение на основе данных на основе результатов.

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

В сентябре 2018 года W3C CSS Scrollbars определил спецификации для настройки внешнего вида полос прокрутки с помощью CSS.

По состоянию на 2020 год 96% пользователей Интернета используют браузеры, поддерживающие стиль полосы прокрутки CSS. Однако вам нужно будет написать два набора правил CSS для поддержки браузеров Blink и WebKit, а также Firefox.

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

Предпосылки

Прежде чем следовать этой статье, вам понадобятся:

• Знакомство с концепциями вендорных префиксов , псевдоэлементов и изящной деградации .

«Префиксы поставщиков» позволяют вашему браузеру поддерживать новые функции CSS до того, как они станут полностью поддерживаться во всех браузерах.

«Изящная деградация» — это стратегия управления дизайном веб-страницы для различных браузеров, как старых, так и новых.

«Псевдоэлементы» — это ключевые слова, добавленные к селектору, которые позволяют вам стилизовать определенную часть выбранного элемента (элементов). Ниже приведены некоторые из «псевдоэлементов», которые вы должны использовать для Chrome, Safari:

• ::-webkit-scrollbar: фон самого бара.
• ::-webkit-scrollbar-button: кнопки направления на полосе прокрутки.
• ::-webkit-scrollbar-track: пустое пространство «под» индикатором выполнения.
• ::-webkit-scrollbar-track-piece: самый верхний слой индикатора выполнения не закрыт большим пальцем.
• ::-webkit-scrollbar-thumb: размер перетаскиваемого прокручиваемого элемента изменяется в зависимости от размера прокручиваемого элемента.
• ::-webkit-scrollbar-corner: нижний угол прокручиваемого элемента, где сходятся две полосы прокрутки.
• ::-webkit-resizer: перетаскиваемый маркер изменения размера, который появляется над углом полосы прокрутки в нижнем углу некоторых элементов.

Стилизация полос прокрутки в Chrome, Edge и Safari

В настоящее время стилизация полос прокрутки для Chrome, Edge и Safari доступна с псевдоэлементом префикса поставщика -webkit-scrollbar.

Вот пример, в котором используются псевдоэлементы ::-webkit-scrollbar, ::-webkit-scrollbar-trackи ::webkit-scrollbar-thumb:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */}body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */}body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */  border-radius: 20px;       /* roundness of the scroll thumb */  border: 3px solid orange;  /* creates padding around scroll thumb */}

Вот скриншот полосы прокрутки, созданной с помощью этих правил CSS:

Этот код работает в последних версиях Chrome, Edge и Safari.

К сожалению, W3C официально отказалась от этой спецификации, и, вероятно, со временем она будет обесценена.

Стилизация полос прокрутки в Firefox

В настоящее время стилизация полос прокрутки для Firefox доступна с новыми полосами прокрутки CSS.

Вот пример использования scrollbar-widthи scrollbar-colorсвойств:

body {
  scrollbar-width: thin;          /* "auto" or "thin" */  scrollbar-color: blue orange;   /* scroll thumb and track */}

Вот скриншот полосы прокрутки, созданной с помощью этих правил CSS:

Эта спецификация имеет некоторые общие черты со -webkit-scrollbarспецификацией управления цветом полосы прокрутки. Однако в настоящее время нет поддержки для изменения заполнения и округлости для «ползунка дорожки».

Создание перспективных стилей полосы прокрутки

Вы можете написать свой CSS таким образом, чтобы он поддерживал как спецификации, так -webkit-scrollbarи CSS Scrollbarsспецификации.

Вот пример, в котором используются scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

/* Works on Firefox */* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}/* Works on Chrome, Edge, and Safari */*::-webkit-scrollbar {
  width: 12px;
}*::-webkit-scrollbar-track {
  background: orange;
}*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Браузеры Blink и WebKit будут игнорировать правила, которые они не распознают, и применять 

-webkit-scrollbarправила. Браузеры Firefox будут игнорировать правила, которые они не распознают, и применять CSS Scrollbarsправила. Как только браузеры Blink и WebKit полностью откажутся от -webkit-scrollbarспецификации, они изящно вернутся к новой CSS Scrollbarsспецификации.

Вывод

В этой статье вы познакомились с использованием CSS для стилизации полос прокрутки и с тем, как обеспечить распознавание этих стилей в большинстве современных браузеров.

Также можно смоделировать полосу прокрутки, скрыв полосу прокрутки по умолчанию и используя JavaScript для определения высоты и положения прокрутки. Однако эти подходы наталкиваются на ограничения при воспроизведении таких явлений, как инерционная прокрутка (например, затухание движения при прокрутке с помощью трекпадов).

Источник

Список цен на услуги

132 просмотров

Отказ от ответственности: Вся размещенная информация была взята из открытых источников и представлена исключительно в ознакомительных целях а также не несет призыва к действию. Создано лишь в образовательных и развлекательных целях. | Так же, если вы являетесь правообладателем размещенного на страницах портала материала, просьба написать нам через контактную форму жалобу на удаление определенной страницы, а также ознакомиться с инструкцией для правообладателей материалов.

Спасибо за понимание.

Если вам понравились материалы сайта, вы можете поддержать проект финансово, переведя некоторую сумму с банковской карты, счёта мобильного телефона или из кошелька ЮMoney.

javascript — Горизонтальная полоса прокрутки у столбца таблицы HTML CSS JS

Задать вопрос

Вопрос задан 2 года 8 месяцев назад

Изменён 16 дней назад

Просмотрен 1k раз

Как я могу добавить горизонтальную прокрутку у ячкейки таблицы? получается сделать только вертикальную.

HTML код:

<table>
   <tbody>
      <tr>
         <td>Какой-то текст</td>
         <td>
            <div>
              *Очень много текста*
            </div>
         </td>
      </tr>
   </tbody>
</table>

CSS код:

.  scroll-x {
   overflow-x: scroll;
   white-space: nowrap;
}

Так же представим, что у ячеек таблицы фиксированная ширина Я использую фиксированную ширину определяя ее в процентах. А с процентами почему-то не работает

• javascript
• html
• css

Когда контента слишком много у тебя появится горизонтальный скролл

.scroll-x {
  overflow-x: auto;
  white-space: nowrap;
 }

2

Всё вроде работает…

td {
  border: 1px solid gray;
  padding: 0.5em;
  
  max-width: 100px;
  white-space: nowrap;
  overflow-x: scroll;
}

<table>
   <tbody>
      <tr>
         <td>Какой-то текст</td>
         <td>*Очень много текста*</td>
      </tr>
      <tr>
         <td>Ещё одна колонка</td>
         <td>*Ещё один очень длинный текст*</td>
      </tr>
   </tbody>
</table>

Возможно, вы просто не ограничили ширину ячейки?

1

table {
  width: 100%;
  table-layout: fixed; /* <========== */
}
td {
  width: 30%;
}
.  scroll {
  width: 70%;
  white-space: nowrap;
  overflow: auto;
}

<table>
  <tbody>
    <tr>
      <td>Какой-то текст</td>
      <td>
        Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста
      </td>
    </tr>
  </tbody>
</table>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Кроссбраузерная совместимость стилей полосы прокрутки CSS в Microsoft Edge 18

Последнее обновление: 2023-03-20

Примечание:

Стиль полосы прокрутки CSS — Не поддерживается в Microsoft Edge 18 . Проще говоря, если ваш веб-сайт или веб-страница использует стиль полосы прокрутки CSS, то любой пользователь, получающий доступ к вашей странице через браузер Microsoft Edge 18, будет иметь безупречный опыт просмотра. Если представление несовместимо между браузерами, то, вероятно, это связано с какой-то другой веб-технологией, кроме стиля полосы прокрутки CSS.

Обзор

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

Присоединяйтесь к бесплатной онлайн-конференции, чтобы расшифровать будущее тестирования!

Зарегистрироваться

Не поддерживается

Оценка совместимости браузера

Microsoft Edge

18

Не поддерживается

Отлаживайте веб-страницы на ходу с расширением LT Debug Chrome.

Добавить в Chrome

Протестируйте свой веб-сайт в более чем 3000 браузерах

Обеспечьте кросс-браузерное тестирование совместимости для стилей полосы прокрутки CSS и других веб-технологий. Вы можете проверить совместимость своего веб-сайта или веб-приложения с тысячами комбинаций браузеров и ОС на LambdaTest.

Протестировать сейчас в Microsoft Edge 18

Зачем проводить тестирование в Microsoft Edge 18

Чтобы разработать правильную стратегию тестирования, важно понимать, сколько пользователей на самом деле используют Microsoft Edge 18
Чтобы помочь вам составить правильную матрицу тестирования браузера, вот общая доля рынка как браузера Microsoft Edge, так и Microsoft Edge версии 18. Дата выпуска

Edge 106

3.13

09.05.2023

Edge 105

0.91

09.05.2023

Край 107

0,14

09.05.2023

Фронт 104

0.07

2023-05-09

Фронт 103

0.04

09.05.2023

Фронт 1 8

0,02

09.05.2023

Прочие

1,29

—

Источник данных: Statcounter.com

ВСЕ ПРОГРАММНЫЕ БРАУЗЕРЫ (январь 2021 г.

– январь 2022 г.)

65,24

Safari

19,06

Край

4,39

Firefox

3.07

Samsung Internet

2.7

Opera

2.5

Другое

3.04 90 003

Источник данных: Statcounter.com

Поддержка веб-технологий Microsoft Edge 18

Для создания стратегии автоматизированного тестирования для проверки ваших веб-приложений в Microsoft Edge 18 вам сначала нужно проверить, какие технологии поддерживаются в Microsoft Edge 18.

Вот список всех веб-технологий, классифицированных по уровню поддержки для Microsoft Edge 18.

• Поддерживается (префиксы не требуются)
• Поддерживается (некоторые префиксы)
• По крайней мере, частично поддерживается
• Нет поддержки

Поддержка браузером стилей полосы прокрутки CSS

Поддержка браузером IE Версии

—

Полностью

11-5.5

Частично

—

Не поддерживается

Тестирование в IE

Поддержка браузера для версий Edge

—

Полностью

90 002 111-79

Частично

18-12

Не поддерживается

Проверка на Edge

Поддержка браузером версий Firefox

—

Полностью

113-64

Частично

63-2

Не поддерживается

Проверка в Firefox

Поддержка браузером версий Chrome

—

Полностью

114-4

Частично

—

Не поддерживается

Тестирование поддержки браузера Chrome

для версий Safari

—

Полностью

16. 4-5.1

Частично

—

Не поддерживается

Проверка в Safari

Поддержка браузера для Версии Opera

—

Полностью

95-15

Частично

12.1 -9.5

Не поддерживается

Тестирование в Opera

Поддержка браузером Safari в версиях iOS

—

Полностью

13-7

Частично

16,4-14,5

Не поддерживается

Проверка в Safari на iOS

Поддержка браузера для версий браузера Android

—

Полностью

111-2.3

Частично

—

Не поддерживается

Проверка в браузере Android

Поддержка браузера Для версий Opera Mobile

—

Полностью

73-64

Частично

12-10

Не поддерживается

Тест на Opera Mobile

9 0002 Поддержка браузера Chrome для Android версии

—

Полностью

111-97

Частично

—

Не поддерживается

Тест на Chrome для Android

Поддержка браузера для Версии Firefox для Android

—

Полностью

—

Частично

110-95

Не поддерживается

Тестирование в Firefox для Android

Поддержка браузером интернет-версий Samsung

—

Полностью Частично

—

Не поддерживается

Проверка в Samsung Internet

О Microsoft Edge

Флагманский браузер, созданный Microsoft, представляет собой кроссплатформенный веб-браузер, который предварительно загружается и устанавливается по умолчанию для компьютеров Windows. С …… % доли мирового рынка браузеров, он становится широко популярным. Тем более, что он выпустил свои версии на основе Chromium.

Первоначально созданный с использованием проприетарного браузерного движка Microsoft EdgeHTML и их движка Chakra JavaScript, он назывался как Microsoft Edge Legacy . Однако его первая версия была выпущена в 2015 году для Windows 10 и Xbox One, за ней последовали версии для Android и iOS, выпущенные в 2017 году. Представленный в 2019 году, The Edge был выпущен с исходным кодом Chromium. Основанный на открытом исходном коде, он позволяет каналам Beta, Developer и Canary изменять и тестировать исходный код и дает им полную свободу действий.

С момента выпуска браузеров Edge на базе Chromium его растущая популярность побудила Microsoft выпустить его для macOS и Linux.

Говоря об обновлениях, бета-канал является наиболее стабильным и получает крупное обновление каждые шесть недель. Dev Channel — это то место, куда вы можете обратиться, если хотите получать еженедельные обновления и первыми тестировать функции, протестированные и проверенные командой Microsoft Edge. Хотя это и небезопасно для ошибок, это «самый безопасный» способ увидеть некоторые из предстоящих передовых функций. Однако Canary Channel автоматически обновляется каждую ночь. Обычно считается нестабильным и наименее рекомендуется использовать его в повседневной сети.

Новый Microsoft Edge заменил устаревшую версию значком «волна». Он хорошо интегрирован во все платформы машин Windows 11 и +. Это позволяет пользователям использовать голосового помощника Cortana, например, для выполнения голосового поиска или сохранения информации прямо в OneDrive без каких-либо хлопот.

Загрузите Microsoft Edge

Загрузите последнюю версию Microsoft Edge с официального сайта Microsoft.

Ресурсы:

Протестируйте свой веб-сайт на последних и устаревших версиях Microsoft Edge

LambdaTest позволяет мгновенно получить доступ к вашему веб-сайту или веб-приложению в различных версиях браузера Microsoft Edge, даже в устаревших версиях Microsoft Edge, которые не основаны на Chromium.

Начать бесплатное тестирование. Веб-документы Mozzila MDN (https://developer.mozilla.org/en-US/)

Web.Dev (https://web.dev/)

Статус платформы Chrome (https://chromestatus.com/features)

Статус функции WebKit (https://webkit.org/status/)

Поддержка браузером стиля полосы прокрутки CSS

• Chrome
• Safari
• Firefox
• Internet Explorer
• Opera
• Edge

Поддержка стиля полосы прокрутки CSS в Google Chrome

Поддержка стиля полосы прокрутки CSS в Microsoft Edge

Поддержка стиля полосы прокрутки CSS в Mozilla Firefox

Поддержка стиля полосы прокрутки CSS в Internet Explorer

Поддержка стиля полосы прокрутки CSS в Opera

Поддержка стиля полосы прокрутки CSS в Safari

Отладка веб-страниц на ходу с помощью расширения LT Debug Chrome.

Добавить в Chrome

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

Попробуйте бесплатно

Протестируйте стиль полосы прокрутки CSS в реальном Microsoft Edge 18

Протестируйте эту и другие функции на своем веб-сайте на совместимость с 3000 реальных браузеров и устройств, используя

Начать бесплатное тестирование

Была ли эта статья полезной?

X

Мы используем файлы cookie, чтобы предоставить вам лучший опыт. Файлы cookie помогают предоставить вам более персонализированный опыт и релевантную рекламу, а нам — веб-аналитику. Узнайте больше в нашей Политике использования файлов cookie, Конфиденциальности и Условиях обслуживания

Разрешить CookieCancel

Предотвращение нежелательных сдвигов макета, вызванных полосами прокрутки, с помощью CSS-свойства scrollbar-gutter – Bram.us

Побочным эффектом при отображении полос прокрутки в Интернете является то, что макет содержимого может меняться в зависимости от типа полосы прокрутки. CSS-свойство scrollbar-gutter , которое скоро появится в Chromium, призвано дать разработчикам больше контроля над этим.

Давайте посмотрим.

~

Содержание

1. Классическая и накладная полосы прокрутки
   • Наложение полос прокрутки
   • Классические полосы прокрутки
2. Проблема
3. Решение: полоса прокрутки : стабильная;
4. Сохранение симметрии с помощью с обеих сторон
5. Предостережения
6. Поддержка браузера
7. Вкратце

~

# Классические и накладные полосы прокрутки

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

# Наложение полос прокрутки

Наложенные полосы прокрутки — это полосы прокрутки в стиле iOS/macOS, которые размещаются над содержимым. Они не отображаются по умолчанию, а только во время прокрутки пользователем. Чтобы содержание под ними оставалось видимым, они полупрозрачны, но это полностью зависит от пользовательского агента (браузера) . При взаимодействии с ними их размер также может меняться.

Рисунок: Наложенная полоса прокрутки размещается над содержимым.

# Классические полосы прокрутки

Классические полосы прокрутки — это полосы прокрутки, которые помещаются в так называемую полосу прокрутки. Полоса прокрутки — это пространство между внутренним краем границы и внешним краем заполнения. В классических полосах прокрутки размер полосы прокрутки совпадает с шириной полосы прокрутки. Эти полосы прокрутки обычно непрозрачны (не прозрачны) и отнимают некоторое пространство у соседнего содержимого.

Рис. Классическая полоса прокрутки отнимает некоторое пространство от смежного содержимого.

🍏 Пользователь macOS? Вы можете переключиться с наложения на классические полосы прокрутки через Системные настройки!

Если вы являетесь пользователем macOS, вы можете переключиться с наложения на классические полосы прокрутки через Системные настройки → Общие. Установите «Показывать полосы прокрутки» на «Всегда»:

Используя по умолчанию , вы также можете включить его:

 по умолчанию пишут NSGlobalDomain AppleShowScrollBars -string «Всегда» 

Некоторые приложения, такие как Chrome, необходимо перезапустить после изменения настройки.

~

# Проблема

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

Рисунок: При отображении полосы прокрутки содержимое смещается.

☝️ В случае полос прокрутки Overlay нет смещения макета, так как эти полосы прокрутки отображаются поверх содержимого.

~

# Решение:

полоса прокрутки: стабильная;

Свойство scrollbar-gutter направлено на решение проблемы, описанной выше.

Установив scrollbar-gutter на stable , мы можем сделать так, чтобы UA всегда отображал полосу прокрутки Gutter, даже если окно не переполняется и полоса прокрутки не отображается . Таким образом, мы получаем визуально стабильный макет: когда поле начинает переполняться, полоса прокрутки будет отображаться, но сдвига макета не произойдет, так как место для него уже зарезервировано.

Рисунок: При отображении полосы прокрутки содержимое не смещается, так как браузер уже зарезервировал место для полосы прокрутки.

Если желоб полосы прокрутки присутствует, но полоса прокрутки отсутствует, фон желоба полосы прокрутки окрашивается как продолжение заполнения.

Обратите внимание, что это свойство scrollbar-gutter не влияет на отрисовку самой полосы прокрутки — оно влияет только на отрисовку желоба. Отрисовкой полосы прокрутки управляет переполнение свойство.

Значение по умолчанию для полосы прокрутки-желоба : auto . С этим установленным значением поведение не отличается от описанного в разделе Проблема

~

# Сохранение симметричности с помощью

Both-Edges

A полоса прокрутки значение стабильная может быть расширена с обеими сторонами -ребра . Установив полосу прокрутки : стабильные оба края; можно добиться симметрии. Согласно спецификации:

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

Рис. Когда показывается полоса прокрутки, содержимое не смещается. Кроме того, такое же пространство желоба было зарезервировано на противоположном краю.

В предыдущей версии спецификации оба края назывались зеркальным .

~

# Предостережения

Есть только два небольших предостережения с этим:

1. Что касается свойства overflow , вместо него к области просмотра применяется полоса прокрутки , установленная на корневом элементе.
2. В отличие от свойства overflow , браузер не будет распространять полосу прокрутки из элемента HTML body .

~

# Поддержка браузера

💡 Хотя этот пост был первоначально опубликован в июле 2021 года, раздел ниже постоянно обновляется. Последнее обновление: 13 января 2023 г. .

Вот актуальный список браузеров, поддерживающих CSS полоса прокрутки :

Chromium (Blink)

✅ Доступно в Chromium 94 и выше.

Экспериментальная поддержка впервые появилась в Chromium 88.

Firefox (Gecko)

✅ Доступно в Firefox 97 и выше.

Safari (WebKit)

❌ Нет поддержки

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

См. тест поддержки полосы прокрутки-желоба Pen CSS от Bramus (@bramus) на CodePen.

Чтобы оставаться в курсе событий, связанных с поддержкой браузеров, вы можете следить за следующими проблемами отслеживания:

• Blink/Chromium: Issue #710214 — Open
• Gecko/Firefox: выпуск № 1715112 — закрыто
• WebKit/Safari: выпуск № 167335 — новый

~

# Резюме

С полосой прокрутки мы можем предотвратить некоторые нежелательные изменения макета, вызванные полосами прокрутки. На приведенном ниже рисунке показаны сценарии, рассмотренные в этом посте:

Если ваш браузер поддерживает полосу прокрутки-желоба , вы также можете проверить эту демонстрацию CodePen:

См. перо Демонстрация полосы прокрутки CSS от Bramus (@bramus) на КодПене.

~

Чтобы помочь распространить содержание этого поста, не стесняйтесь сделать ретвит объявления:

Предотвращение нежелательных сдвигов макета, вызванных полосами прокрутки, с помощью CSS-свойства `scrollbar-gutter` мы (@bramusblog) 23 июля 2021 г.