Mam ten problem - mam kontener, który zawiera kilka wierszy, aw każdym wierszu jest lepka lewa kolumna, a następnie wiele innych kolumn. W poniższym przykładzie działa to przez chwilę, ale podczas przewijania kontenera nadrzędnego pozycja lepka już nie działa i jest przesuwana podczas przewijania.

.container {
  overflow-x: scroll;
}

.row {
  display: flex;
  width: 100%;
  
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}
<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Czy jest jakiś sposób na rozwiązanie tego… czy jest inny sposób na osiągnięcie tego?

Moim pożądanym rezultatem jest umieszczenie lepkiego div po lewej stronie 0 i przewinięcie innych kolumn pod spodem.

Teraz wiem, że jeśli overflow-x: scroll znajduje się na rzeczywistym elemencie .row, działa zgodnie z oczekiwaniami .. ale mogę mieć ponad 100 wierszy, więc przewijanie musi znajdować się w kontenerze nadrzędnym

3
Smokey Dawson 7 styczeń 2020, 00:41

1 odpowiedź

Najlepsza odpowiedź

Dodaj obramowanie, aby lepiej zobaczyć problem, który jest związany z użyciem elementu na poziomie bloku i ograniczeniem width:100% (nie tego, które ustawiasz, który jest bezużyteczny, ale domyślne zachowanie elementów blokowych)

.container {
  overflow-x: scroll;
}

.row {
  display: flex;
  border:1px solid;
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}
<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Rozważ element na poziomie liniowym, używając inline-flex do rozwiązania problemu. Dodaj min-width:100%, aby upewnić się, że zajmujesz co najmniej 100% szerokości, jeśli zawartość jest mała.

.container {
  overflow-x: scroll;
}

.row {
  display: inline-flex;
  min-width: 100%;
  border:1px solid;
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}
<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Niektóre powiązane pytania:

Zagnieżdżony element lepki z zerowym lewym

Dlaczego mój element nie przykleja się do lewej strony podczas używania pozycji w CSS?

4
Temani Afif 6 styczeń 2020, 21:48