Início / coding / Perguntas / 78499602
Accepted
Cilenco
Asked: 2024-05-18 19:41:37 +0800 CST

Deixe o filho pegajoso enquanto o pai rola

  • 772

Digamos que eu tenha uma estrutura semelhante a esta:

<div id="list" style="width: 500px; height: 300px; overflow: auto;">
  <div id="list_wrapper" style="width: 700px;">
    <div class="row" style="width: 100%; height: 50px;">
      <span style="display: inline-block; width: 200px;">Title</span>
      <span>Content</span>
    </div>
    <!-- more rows -->
  </div>
</div>

A lista aqui pode rolar horizontalmente, pois list_wrapperé maior que ela listmesma. Gostaria de registrar que o título spanpermanece rowà esquerda da lista quando é rolado horizontalmente, mas não tenho certeza de como fazê-lo. Esse comportamento é possível apenas com CSS?

css

1 respostas

  1. Best Answer

    Dei aos elementos uma cor de fundo para distingui-los.

    É possível dar ao Titleelemento a position: sticky;left: 0.

    <div id="list" style="width: 500px; height: 300px; overflow: auto;background:green;">
  <div id="list_wrapper" style="width: 700px;background:red;">
    <div class="row" style="width: 100%; height: 50px;">
      <span style="display: inline-block; width: 200px;position: sticky;left: 0;background: blue;">Title</span>
      <span>Content</span>
    </div>
    <!-- more rows -->
  </div>
</div>

    • 2

relate perguntas