Элементы сетки перекрываются с позицией липкой - PullRequest
Новая
       27

Элементы сетки перекрываются с позицией липкой

1 голос
/ 04 марта 2020

У меня возникла проблема с прикрепленными элементами в контейнере сетки в firefox.

Я создал контейнер сетки с 8 элементами по 100 пикселей каждый:

  • элемент 1 липкая к левой стороне
  • пункт 8 липкая к правой стороне контейнера

При прокрутке вправо от контейнера сетки:

  • В Chrome (80.0.3987.122) все в порядке. элементы 7 и 8 и рядом друг с другом (и начальная scrollWidth контейнера была 800px)
  • В Firefox (73.0.1 (64-bit) однако элементы 7 и 8 перекрываются (и начальная scrollWidth контейнера была 700px)

Кто-нибудь знает, как решить эту проблему в Firefox?

См. Прилагаемый фрагмент.

Спасибо! 

setTimeout(() => {
  console.log('container width', document.querySelector('#container-grid').scrollWidth + 'px');
}, 100)
#container-grid {
  width: 500px;
  background: silver;
  height: 100px;
  overflow-x: scroll;
}

.items {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;
}

.sticky-left {
  position: sticky;
  left: 0;
}


.sticky-right {
  position: sticky;
  right: 0;
}
<div id="container-grid">
  <div class="items">
    <div class="item">item 1</div>
    <div class="item sticky-left">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item ">item 6</div>
    <div class="item ">item 7</div>
    <div class="item sticky-right">item 8</div>
  </div>
</div>

Ответы [ 2 ]

2 голосов
/ 04 марта 2020

Добавление дополнительного элемента с очень маленькой шириной, кажется, позволяет избежать ошибки на firefox

setTimeout(() => {
  console.log('container width', document.querySelector('#container-grid').scrollWidth + 'px');
}, 100)
#container-grid {
  width: 500px;
  background: silver;
  height: 100px;
  overflow-x: scroll;
}

.items {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 0.3px;
}
.items::after {
  content:"";
}

.sticky-left {
  position: sticky;
  left: 0;
}


.sticky-right {
  position: sticky;
  right: 0;
}
<div id="container-grid">
  <div class="items">
    <div class="item">item 1</div>
    <div class="item sticky-left">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item ">item 6</div>
    <div class="item ">item 7</div>
    <div class="item sticky-right">item 8</div>
  </div>
</div>
1 голос
/ 04 марта 2020

Я не думаю, что есть решение этой проблемы.

Вы смешиваете передовые функции (position: sticky и элементы сетки), поэтому браузерам, вероятно, просто нужно некоторое время, чтобы разобраться в правильности поведение.

Обратите внимание, что position: sticky еще не имеет полной поддержки браузера .

Я бы попытался построить макет в стандартном контексте форматирования блока (display: block или inline-block).

...