Решение только для CSS для индикаторов переполнения/прокрутки ⇐ CSS

[Anonymous]

У меня есть индикатор прокрутки, сделанный только с CSS. Это работает почти везде и отлично. Единственная проблема заключается в том, что, если коробка не переполнена (первая коробка), то содержание коробки не выровнено влево. Есть идеи, как это сделать? Также: не стесняйтесь использовать этот код < /p>

Код: Выделить всё

html {
background: #FFF;
}

.scrollbox ul {
white-space: nowrap;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin-left: -4rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style-type: none;
}

.scrollbox {
outline: 1px dotted black;
position: relative;
z-index: 1;
overflow-x: auto;
overflow-y: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
word-wrap: nowrap;
max-width: 200px;
margin: 50px auto;
background: #FFF no-repeat;
background-image:
-webkit-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
-webkit-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image:
-o-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
-o-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image:
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-position: 0 0, 100% 0;
background-size: 1rem 100%;
}

.scrollbox::before,
.scrollbox::after {
content: '';
position: relative;
z-index: -1;
display: block;
width: 2rem;
margin: 0;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}

.scrollbox::before {
background: -webkit-gradient(linear,left top, right top,from(#FFF),color-stop(50%, #FFF),to(rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));
background: -o-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));
background: linear-gradient(to right,#FFF,#FFF 50%,rgba(255,255,255,0));
}

.scrollbox::after {
background: -webkit-gradient(linear,left top, right top,from(rgba(255,255,255,0)),color-stop(50%, #FFF),to(#FFF));
background: -webkit-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);
background: -o-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);
background: linear-gradient(to right,rgba(255,255,255,0),#FFF 50%,#FFF);
}< /code>

[list]
[*]1
[*]2
[*]3
[*]4
[*]5
[/list]

[list]
[*]Ah! Scroll right!
[*]2 Lorem Ipsum
[*]3 Lorem Ipsum
[*]4 Lorem Ipsum
[*]5 Lorem Ipsum
[*]6 Lorem Ipsum
[*]7 Lorem Ipsum
[*]8 Lorem Ipsum
[*]9 Lorem Ipsum
[*]1 Lorem Ipsum0
[*]1 Lorem Ipsum
[*]2 Lorem Ipsum
[*]3 Lorem Ipsum
[*]4 Lorem Ipsum
[*]5 Lorem Ipsum
[*]6 Lorem Ipsum
[*]7 Lorem Ipsum
[*]8 Lorem Ipsum
[*]9 Lorem Ipsum
[*]1 Lorem Ipsum0
[*]1 Lorem Ipsum
[*]2 Lorem Ipsum
[*]3 Lorem Ipsum
[*]4 Lorem Ipsum
[*]5 Lorem Ipsum
[*]6 Lorem Ipsum
[*]7 Lorem Ipsum
[*]8 Lorem Ipsum
[*]The end!
[*]No shadow there.
[/list]

Подробнее здесь: https://stackoverflow.com/questions/451 ... indicators