Скроллбар меньше родительского блока на чистом CSS

Все чаще скрипты можно заменить стилями. Сегодня расскажу как сделать горизонтальный слайдер с полосой прокрути уже (меньше по ширине), чем родительский блок.

Сперва накидаем html:

<div class="block">
<span></span><span></span><span></span><span></span><span> </span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>

немного стилей:

.block{
display: flex;
margin: 100px -10px 100px;
overflow-x: auto;
}
.block>span{
width: 150px;
height: 100px;
flex-shrink: 0;
border: 1px solid black;
margin: 0 10px;
}

Стилизуем скролл, добавив еще немного стилей:

.block::-webkit-scrollbar {
height: 6px;
}

.block::-webkit-scrollbar-track-piece,.block::-webkit-scrollbar-track {
background: #E6E6E6;
border-radius: 10px; /* цвет дорожки */
}

.block::-webkit-scrollbar-thumb {
background-color: var(--black-color); /* цвет плашки */
border-radius: 10px; /* закругления плашки */
}

Получим:

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

Выглядит не очень красиво. Пару строчек стиля уменьшает длину скролла.

А теперь магия:

.block::-webkit-scrollbar-button:end:decrement,.block::-webkit-scrollbar-button:start:increment {
width: 100px;
display: block;
background: transparent;
}

В данном коде ширина - это отступ справа и слева, соотвественно.

::-webkit-scrollbar-button:start:increment - отступ слева

::-webkit-scrollbar-button:end:decrement - отступ справа.

Значения можно указывать и в %.

В итоге получаем:

Красивый слайдер на чистом CSS

Код целиком для удобства копирования:

<div class="block">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<style>
.block{
display: flex;
margin: 100px -10px 100px;
overflow-x: auto;
}
.block>span{
width: 150px;
height: 100px;
flex-shrink: 0;
border: 1px solid black;
margin: 0 10px;
}

.block::-webkit-scrollbar {
height: 6px;
}

.block::-webkit-scrollbar-track-piece,.block::-webkit-scrollbar-track {
background: #E6E6E6;
border-radius: 10px; /* цвет дорожки */
}

.block::-webkit-scrollbar-thumb {
background-color: var(--black-color); /* цвет плашки */
border-radius: 10px; /* закругления плашки */
}

.block::-webkit-scrollbar-button:end:decrement,.block::-webkit-scrollbar-button:start:increment {
width: 100px;
display: block;
background: transparent;
}
</style>

Надеюсь, была полезной❤️