Как применить свойства CSS к прокручиваемому элементу к частям его дочерних элементов, которые были скрыты перед прокрут ⇐ CSS

[Anonymous]

Изображение 1 Изображение 2
У меня на сайте есть элемент, который должен прокручиваться горизонтально (overflow-x: прокрутка) на маленьких экранах. Проблема в том, какие свойства я применил. чтобы его дочерние элементы появлялись только в тех частях, которые были видны до прокрутки, на примерах изображений вы можете видеть, что цвет фона не одинаков для всех элементов, а также невозможно взаимодействовать с областью за пределами выбранной части. Я добавлю этот пример, чтобы прояснить мою проблему.

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

&__content {
margin-top: 25px;
width: 100%;
background-color: white;
border-radius: 5px;
box-shadow: 4px 4px 5px rgb(214, 214, 214);
overflow-x: scroll;

&__header {
@include flex(1, 0);
justify-content: start;

p {
@include flex(0, 0);
width: 100%;
text-align: center;
height: 100%;
height: 50px;
padding-right: 10px;
border-bottom: 1px solid rgb(202, 202, 202);

&:nth-child(1) {
width: 60px;
min-width: 60px
}
&:nth-child(2) {
width: 100%;
min-width: 200px
}
&:nth-child(3) {
width: 100%;
min-width: 350px;
}
&:nth-child(4) {
width: 100%;
min-width: 200px
}
&:nth-child(5) {
width: 100%;
min-width: 150px
}
&:nth-child(6) {
width: 60px;
min-width: 60px
}
&:nth-child(7) {
width: 100%;
min-width: 200px;
}
&:nth-child(8) {
width: 200px;
min-width: 200px;
}
}
}

&__pedido, &__pedido-finalizado {
@include flex(0, 0);
justify-content: start;
padding: 10px 0;
transition: all ease-in-out 125ms;

&:hover {
cursor: pointer;
background-color: rgb(247, 247, 247)
}

p {
@include flex(0, 0);
text-wrap:nowrap;
overflow-x: hidden;
padding-right: 10px;
pointer-events: none;
user-select: none;

&:nth-child(1) {
width: 60px;
min-width: 60px
}
&:nth-child(2) {
width: 100%;
min-width: 200px
}
&:nth-child(3) {
width: 100%;
min-width: 350px;
}
&:nth-child(4) {
width: 100%;
min-width: 200px
}
&:nth-child(5) {
width: 100%;
min-width: 150px
}
&:nth-child(6) {
width: 60px;
min-width: 60px
}
&:nth-child(7) {
width: 100%;
min-width: 200px;
}
&:nth-child(8) {
width: 200px;
min-width: 200px;
}
}
}

&__pedido-finalizado {
filter: opacity(25%);

&:hover {
background-color: rgb(221, 221, 221)
}
}

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

    function RenderPedidos() {
return(
pedidos.map((pedido, index) => (
handleClickPedido(event)}>
{(pedido.id > 9999) ? String(pedido.id).slice(0, 4) + '...' : pedido.id}
{(pedido.nome.length > 20) ? pedido.nome.slice(0 ,21) + '...' : pedido.nome}
{(pedido.descricao.length > 35) ? pedido.descricao.slice(0 ,36) + '...' : pedido.descricao}
{(pedido.material.length > 20) ? pedido.material.slice(0 ,21) + '...' : pedido.material}
{"R$ "  + pedido.valor.toFixed(2)}
{pedido.quantidade}
{(pedido.cliente.length > 20) ? pedido.cliente.slice(0 ,21) + '...' : pedido.cliente}
{formatDatetime(pedido.prazo, 0)}

))
)
}
...


ID
Nome
Descrição
Material
Valor
Qtd.
Cliente
Prazo

Я пытался повозиться с некоторыми свойствами, но безрезультатно.

Подробнее здесь: https://stackoverflow.com/questions/787 ... s-children