Как изменить скролл CSS

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

Добавьте свойство overflow: scroll или overflow: auto для элемента, чтобы создать вертикальный или горизонтальный скроллбар:

.element {
  overflow: scroll; /* или overflow: auto; */
}

Чтобы изменить цвет скроллбара, используйте свойство scrollbar-color:

.element::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.element::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

.element::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

Чтобы изменить размер и форму скроллбара, используйте свойство scrollbar-width:

.element::-webkit-scrollbar {
  width: 20px;
  height: 20px;
  scrollbar-width: thin; /* или scrollbar-width: none; */
}

Чтобы изменить положение скроллбара, используйте свойство scrollbar-track-color:

.element::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  scrollbar-track-color: #ccc;
}

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

.element::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

Чтобы изменить скроллбар при активации (нажатии на него), используйте псевдокласс :active:

.element::-webkit-scrollbar-thumb:active {
  background-color: #666;
}

Обратите внимание, что свойства для изменения скроллбара могут отличаться в разных браузерах. Например, в Firefox используются свойства scrollbar-color и scrollbar-width, а в IE — свойства scrollbar-base-color и scrollbar-arrow-color.