Как позволить div перекрывать контейнер «position: fixed» и прокручивать его вертикально с содержимым фиксированных контейнеров - PullRequest
Новая
       30

Как позволить div перекрывать контейнер «position: fixed» и прокручивать его вертикально с содержимым фиксированных контейнеров

0 голосов
/ 05 февраля 2019

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

Существует jsfiddle , который демонстрирует проблему.

Цель

[Пример в изображенииудален из-за отсутствия репутации.Его можно найти здесь .]

Функциональная цель - создать кликабельный маркер рядом с элементом управления вводом на боковой панели с фиксированным расположением, где клиент может редактировать несколько свойств бизнес-элемента.,Маркер должен перекрывать границы контейнера, чтобы выделяться больше.Исходя из этого, я хочу выполнить как минимум пять требований:

  • Самый верхний контейнер должен иметь положение: фиксированное, поскольку SPA в фоновом режиме можно прокручивать в обоих направлениях
  • Содержимое самого верхнего фиксированного контейнера должно прокручиваться вертикально, если это необходимо, но не должно прокручиваться горизонтально
  • Поле должно находиться рядом с целью в содержимом
  • Это поле должно перекрывать верхний контейнерграницы
  • Это поле должно прокручиваться по вертикали при прокрутке содержимого самого верхнего контейнера (и, следовательно, цели блока)

Базовая структура - это фиксированный контейнер> содержимое (я)> перекрывающийся элемент div.Я осознаю тот факт, что комбинация переполнения и относительного позиционирования остановит перекрытие дочернего элемента с абсолютным позиционированием.Поэтому я попробовал несколько вариантов правил CSS и HTML-разметки - но в итоге окно либо перекрывалось, либо прокручивалось с его целью.Мы очень ценим ваши идеи о том, как решить эту проблему без кода.

Код

Это (упрощенная) разметка HTML: 

<div class="sidebar-container">
  <div class="sidebar-content-wrapper">
    <div class="sidebar-content">
      <div class="sidebar-content-main">
        <!-- more content -->
        <div class="overlap-container">
          <div class="overlap-wrapper">
            <div class="overlap-relative-container">
              <div class="overlap-box"></div>
            </div>
            <div class="overlap-caption">Some text, the box should appear left to this element.</div>
          </div>
        </div>
        <!-- more content -->
      </div>
    </div>
  </div>
</div>

Самый верхний контейнерисправлено: 

.sidebar-container {
  position: fixed;
  // [ ... ]
}

Это дочерний элемент, у оболочки содержимого есть правила, разрешающие вертикальную прокрутку содержимого, а горизонтальная полоса прокрутки скрыта: 

.sidebar-content-wrapper {
  height: 100%;
  // content should be scrollable vertically, while horizontal scroll is not allowed
  overflow-y: scroll;
  overflow-x: hidden;
}

Поле, которое должно перекрывать контейнерпозиционируется абсолютно: 

.overlap-box {
  position: absolute;
  left: -2em;
  width: 3em;
  height: 3em;
  z-index: 99;
  // [ ... ]
}

Остановка здесь позволит коробке перекрывать фиксированный контейнер.Однако, если содержимое прокручивается по вертикали, поле также не будет прокручиваться, поскольку оно расположено на следующем позиционированном элементе, который является .sidebar-container.Итак, давайте добавим position: relative к родительскому элементу поля: 

.overlap-relative-container {
  position: relative;
}

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

Полный код можно найти в этом jsfiddle .

Уроки, полученные на данный момент

Отказ от ответственности: я знаю, что есть работающее решение, использующее событие onscroll и JavaScript.И я готов реализовать это решение, чтобы окончательно решить мою проблему.Тем не менее, решение только для CSS было бы намного лучше ИМХО, и я хочу разрубить этот маленький узел Гордиана: -)

1 Ответ

0 голосов
/ 05 февраля 2019

Насколько мне известно, единственный способ разрешить отображение дочерних элементов вне родительского контейнера в этом отношении - это использовать 

overflow: visible;

или, в вашем случае: 

overflow-x: visible;

в родительском контейнере.

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

Источник: https://www.w3.org/TR/css-overflow-3/#valdef-overflow-scroll

"Это значение указывает, что содержимое обрезается до поля заполнения, ..."

Дополнительная информация об этом конфликте / проблеме:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

https://www.w3.org/TR/css-overflow-3/#scrollable-overflow

Если вы найдете обходной путь только для CSS, яуверен, что остальные из нас хотели бы знать!Но, похоже, у вас может быть боковая панель без прокрутки или другой дизайн.

...