{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все чаще скрипты можно заменить стилями. Сегодня расскажу как сделать горизонтальный слайдер с полосой прокрути уже (меньше по ширине), чем родительский блок.","type":"unstyled","key":"9nn5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сперва накидаем html:","type":"unstyled","key":"dl5l7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n \n \n

","type":"blockquote","key":"85sfn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"немного стилей:","type":"unstyled","key":"csc64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".block{\n display: flex;\n margin: 100px -10px 100px;\n overflow-x: auto;\n}\n.block>span{\n width: 150px;\n height: 100px;\n flex-shrink: 0;\n border: 1px solid black;\n margin: 0 10px;\n}","type":"blockquote","key":"ae3fi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стилизуем скролл, добавив еще немного стилей:","type":"unstyled","key":"6vmpa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".block::-webkit-scrollbar {\n height: 6px;\n}\n\n.block::-webkit-scrollbar-track-piece,.block::-webkit-scrollbar-track {\n background: #E6E6E6;\n border-radius: 10px; /* цвет дорожки */\n}\n\n.block::-webkit-scrollbar-thumb {\n background-color: var(--black-color); /* цвет плашки */\n border-radius: 10px; /* закругления плашки */\n}","type":"blockquote","key":"bae53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получим:","type":"unstyled","key":"4dd2u"},{"data":{"image":{"id":"66dffec590aea7595ff760f0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Слайдер со стилизованным скроллом","type":"atomic:image","key":"25prf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выглядит не очень красиво. Пару строчек стиля уменьшает длину скролла.","type":"unstyled","key":"7fn31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь магия:","type":"unstyled","key":"a1ka5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".block::-webkit-scrollbar-button:end:decrement,.block::-webkit-scrollbar-button:start:increment {\n width: 100px;\n display: block;\n background: transparent;\n}","type":"blockquote","key":"13n7g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"92ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном коде ширина - это отступ справа и слева, соотвественно. ","type":"unstyled","key":"qg6n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"::-webkit-scrollbar-button:start:increment - отступ слева","type":"unstyled","key":"bu39b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"::-webkit-scrollbar-button:end:decrement - отступ справа.","type":"unstyled","key":"9b0ph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"ITALIC"}],"text":"Значения можно указывать и в %.","type":"unstyled","key":"de5sf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"В итоге получаем:","type":"unstyled","key":"dg28n"},{"data":{"image":{"id":"66dffd3693989338f1b52117"},"images":[{"id":"66dffd3693989338f1b52117"}],"contents":{}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Красивый слайдер на чистом CSS","type":"atomic:image","key":"bpvvh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код целиком для удобства копирования:","type":"unstyled","key":"6ots7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n \n \n

\n","type":"blockquote","key":"domhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь, была полезной❤️","type":"unstyled","key":"eluiq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"IEmK65SeO9scE5UMKkHF"}],"entityMap":{}},"mentions":[]}