在可滚动元素上，如何将 CSS 属性应用于滚动前隐藏的子元素部分？

Question

图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) => (
                <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>
            ))
        )
    }
...
 <div className="pedidos-container__content">
                <div className="pedidos-container__content__header">
                    <p>ID</p>
                    <p>Nome</p>
                    <p>Descrição</p>
                    <p>Material</p>
                    <p>Valor</p>
                    <p>Qtd.</p>
                    <p>Cliente</p>
                    <p>Prazo</p>
                </div>
                <RenderPedidos/>
            </div>

我尝试修改一些属性，但没有得到有意义的结果。

Answer 1

问题与块元素的工作方式有关。 p 标签或段落标签默认是块级元素，应用于块级元素的样式将仅应用到元素容器的最大宽度。在这种情况下（在您链接的示例中），您的容器的宽度为 500px，因此应用到它的样式仅应用到内容在容器内的位置。一旦溢出，样式将不再适用于溢出的内容。

但是，并非每种风格都如此。例如，如果您在悬停时更改文本颜色，它实际上会起作用，因为溢出区域中仍然有文本，但没有背景。因此，background-color只能应用于容器中实际有背景的部分，也就是你应用的500px宽度。 DOM 不认为溢出区域有背景。

* {
  margin: 0
}

body,
html {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%
}

#container {
  width: 500px;
  height: 200px;
  background-color: #b3b3b3;
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
  overflow: auto;
}

p {
  text-wrap: nowrap;
  /* You will need to target only the overflowing paragraph tags if you want the highlight to expand the entire block on elements that are not overflowing. For instance, the first paragraph tag with the text "ID" will not fill up the block anymore with this styling as it only fills up the width of its content. However, it does style the paragraph tags with the background-color white in the overflow area.   */
  display: inline;
}

p:hover {
  cursor: pointer;
  background-color: white;
}

<div id="container">
  <p>ID</p>
  <p><span>The Syrian Democratic Forces (SDF) is a Kurdish-led coalition formed by ethnic militias and rebel groups, and serves as the official military wing of the ...<span></p>
</div>

最后一个“问题”现在是 p 标签，它们不是块的完整宽度，仅突出显示文本的宽度而不是整个块。如果您希望突出显示在未溢出的元素上扩展整个块，则只需定位溢出的段落标记。例如，带有文本“ID”的第一个段落标签将不再使用此样式填充块，因为它只填充其内容的宽度。但是，它确实在溢出区域中使用背景色白色设置段落标签的样式。