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

[Anonymous]

Изображение 1:


Изображение 2:


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


< pre class="snippet-code-js lang-js Prettyprint-override">

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

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

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

&__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)
}
}

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

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

Я пытался повозиться с некоторыми свойствами, но ничего значимого не получилось.< /п>

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