Как сделать полосу прокрутки прозрачной и наложить ее поверх содержимого?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как сделать полосу прокрутки прозрачной и наложить ее поверх содержимого?

Сообщение Anonymous »

Я пытаюсь сделать дорожку полосы прокрутки прозрачной и наложить ее поверх содержимого, а не занимать место рядом с ней. Я использовал следующий CSS:
@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
--fs-xs: clamp(0.75rem, 1.5vw + 0.3rem, 1rem);
--fs-s: clamp(0.850rem, 1.8vw + 0.35rem, 1.25rem);
--fs-m: clamp(1rem, 2vw + 0.4rem, 1.5rem);
--fs-l: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
--fs-xl: clamp(1.375rem, 3vw + 0.45rem, 3.25rem);
--fs-xxl: clamp(1.5rem, 3.714vw + 0.407rem, 4.5rem);
--fs-xxxl: clamp(3rem, 8.714vw + 1.207rem, 9rem);
--fs-xxxxl: clamp(2.5rem, 6.714vw + 0.807rem, 7.5rem);
--fs-xxxxxl: clamp(4.5rem, 10.714vw + 1.607rem, 11.25rem);
}
body {
overflow: overlay;
}

::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-thumb {
background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
background: transparent;
}
< /code>
Появляется прокрутка, но вместо наложения контента он все равно толкает контент внутрь, занимая дополнительное пространство. Кроме того, трек Scrollbar не полностью прозрачен - он отображается с внешним видом по умолчанию. < /P>
Чего мне здесь не хватает? Почему прокрутка не накладывает контент и не отображает прозрачную дорожку, как и ожидалось? Любой совет о том, как это исправить, будет оценен!

Подробнее здесь: https://stackoverflow.com/questions/793 ... of-content
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»