Абсолютное выравнивание нескольких элементов при горизонтальной прокрутке - PullRequest
1 голос
/ 22 марта 2020

У меня есть список элементов внутри табличного контейнера с горизонтальной прокруткой. Каждый элемент имеет одинаковую ширину, но может иметь разную высоту. Мне бы хотелось, чтобы у каждого из этих элементов была кнопка в правом верхнем углу, но я не хочу, чтобы эта кнопка прокручивалась из поля зрения, когда элементы становятся слишком длинными.

Я нашел это ответ , который решает ту же проблему, но только для одного элемента в элементе прокрутки. Он основан на расположении кнопки относительно контейнера, что я не могу сделать из-за списка элементов.

Моя текущая попытка выглядит следующим образом:

.container {
  width: 400px;
  position: relative;
  overflow-x: auto;
}
.table {
  display: table;
}
.row {
  /* 
  If the row isn't relative, all buttons stick to the
  container top.
  
  However, the buttons are now also out of view 
  due to the overflow.
  */
  position: relative;
  
  /* Just to make the content overflow */
  white-space: nowrap;
  
  /* For a clearer distinction between rows */
  padding: 0.5rem;
  border-bottom: 1px solid black;
}
.button {
  /* The button needs to be in line with the parent row */
  top: 0;
  
  right: 0;
  position: absolute;
}
<div class="container">
  <div class="table">
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
      </div>
      <button class="button">1</button>
    </div>
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
        <br>
        This one is however a bit taller than the other items.
      </div>
      <button class="button">2</button>
    </div>
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
      </div>
      <button class="button">3</button>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 22 марта 2020

это будет решено position:sticky

0 голосов
/ 22 марта 2020

Вы можете решить эту проблему, используя position:sticky

.container {
  width: 400px;
  position: relative;
  overflow-x: auto;
}

.table {
  display: table;
}

.row {
  position: relative;
  white-space: nowrap;
  padding: 0.5rem;
  border-bottom: 1px solid black;
  display:flex;
}

.button {
  right: 0;
  margin-top:-5px;
  position: sticky;
  align-self:flex-start;
  margin-left:auto;
}
<div class="container">
  <div class="table">
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
      </div>
      <button class="button">1</button>
    </div>
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
        <br> This one is however a bit taller than the other items.
      </div>
      <button class="button">2</button>
    </div>
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
      </div>
      <button class="button">3</button>
    </div>
    <div class="row">
      <div>
        Some content 
      </div>
      <button class="button">4</button>
    </div>
  </div>
</div>
...