내 위치: 플렉스박스를 사용할 때 스틱 요소가 끈적거리지 않습니다.

내 위치: 플렉스박스를 사용할 때 스틱 요소가 끈적거리지 않습니다.

나는 이것에 조금 집착했고 이것을 공유하려고 생각했습니다.position: stickyflexbox gotcha:

제 스틱 디브는 제가 플렉스 박스 컨테이너로 제 시야를 바꿀 때까지 잘 작동했고, 플렉스 박스 부모에 싸여 있을 때 갑자기 디브는 끈적이지 않았습니다.

.flexbox-wrapper {
  display: flex;
  height: 600px;
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

문제를 표시하는 JSFidle

플렉스 박스 요소는 기본적으로 다음과 같이 설정됩니다.stretch모든 요소가 동일한 높이이므로 스크롤할 수 없습니다.

추가 중align-self: flex-start고정 요소에 대해 높이를 자동으로 설정합니다. 자동으로 설정하면 스크롤이 허용되고 고정됩니다.

현재 이것은 모든 주요 브라우저에서 지원되지만 Safari는 여전히 다음과 같습니다.-webkit-Prefix 및 Firefox를 제외한 다른 브라우저에 몇 가지 문제가 있습니다.position: sticky테이블

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* Not necessary -- for example only */
}
.regular {
  background-color: blue; /* Not necessary -- for example only */
  height: 600px;          /* Not necessary -- for example only */
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- this is the fix */
  background-color: red;  /* Not necessary -- for example only */
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

솔루션을 보여주는 JSFidle

제 경우, 부모 컨테이너 중 하나가overflow-x: hidden;그것에 적용되면, 그것은 깨질 것입니다.position: sticky기능성해당 규칙을 제거해야 합니다.

어떤 상위 요소에도 위의 CSS 규칙이 적용되어서는 안 됩니다.이 조건은 '본체' 요소를 포함하지 않는 모든 부모에게 적용됩니다.

상위 요소에서 플렉스를 사용하는 경우 스틱으로 만들 요소에 align-self: flex-start를 사용합니다.

position: sticky;
align-self: flex-start;
top: 0;
overflow-y: auto;

내용이 포함된 플렉스 항목에 하위 디브를 추가하고 할당할 수도 있습니다.position: sticky; top: 0;거기까지

첫 번째 열의 내용이 고정되어야 하고 두 번째 열은 스크롤이 가능해야 하는 두 개의 열 레이아웃에 적합했습니다.

내 상황을 위해서,align-self: flex-start(또는)justify-self: flex-start) 솔루션이 작동하지 않습니다.나는 계속해야 합니다.overflow-x: hidden또한 일부 용기가 수평으로 스와이프되기 때문입니다.

내 솔루션에 중첩이 필요함display: flex와 함께overflow-y: auto원하는 동작을 얻는 방법:

• 헤더는 높이를 동적으로 조정할 수 있으며, 이는 게임을 하는 것을 방해합니다.position: absolute또는position: fixed
• 내용 스크롤, 보기 너비에 대해 수평으로 제한
• 스티커 요소는 헤더 하단에 부착되어 수직으로 아무 곳에나 있을 수 있습니다.
• 다른 요소들은 수평으로 미끄러질 수 있습니다.
  • SO 스니펫 도구가 렌더링할 수 없는 것 같습니다.width수평 슬라이드를 제대로 보여줄 수 있는 하위 요소나 실제 레이아웃에서 작동하는 다른 설정이 있을 수 있습니다.
  • 다른 어떤 것도 하지 않는 래퍼 요소는 허용하기 위해 필요합니다.overflow-x: auto 에 있는 하는 것overflow-x: hidden

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

body>header {
  background-color: red;
  color: white;
  padding: 1em;
}

.content {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.horizontal_slide {
  display: flex;
  overflow-x: auto;
  background-color: lightblue;
  padding: .5em;
}

.horizontal_slide>* {
  width: 1000px;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: lightgray;
  padding: .5em;
  display: flex;
}

<header>Fancy header with height adjusting to variable content</header>
<div class="content">
  <article class="card">
    <h1>One of several cards that flips visibility</h1>
    <div class="overflow_x_wrapper">
      <div class="horizontal_slide">
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
      </div>
      <div class="toolbar">Sticky toolbar part-way down the content</div>
      <p>Rest of vertically scrollable container with variable number of child containers and other elements</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  </div>

flex-wrapper에 높이가 할당되었는지 확인하고 오버플로 값을 auto로 설정합니다.그런 다음 "align-self: flex-start;"를 스틱 요소에 추가합니다.

.flexbox-wrapper {
  display: flex;
  height: 600px;  //<- nessary,and don't assign with %
  overflow:auto;  //<-fix
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
  align-self: flex-start; // <-fix
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

임시 플렉스박스 테이블을 만들었는데 이 문제가 있었습니다.이를 해결하기 위해 스틱 헤더 행을 플렉스 박스 바로 앞에 배치했습니다.

내 경험에 의한 글로벌 솔루션/규칙:

끈적끈적한 요소가 있는 구조물을 {display:flex} 용기 안에 직접 넣지 마십시오.

대신(플렉스 레이아웃의 경우) 스틱 요소가 있는 테이블/div를 플렉스 하위 컨테이너 안에 배치합니다(예: {flex: 11 auto}, 그러나 {display: flex}). 그러면 모든 것이 의도한 대로 작동합니다.

이것은 저에게 효과가 있었지만, 저는 당신이 가지고 있는 문제인지 아닌지 모르겠습니다.그리고 제 문제는 뷰포트가 너무 작을 때 플렉스박스의 중심 콘텐츠가 숨겨져 있다는 것입니다.

/*this is the wrapper of centered content*/
.section {
    overflow-y: auto;
    max-height: none;
    height: 100%;
    min-height: 100vh; /*optional, can be changed to anything*/
}

<div class="section">
   <div class="content">
      Some long content that is centered....
   </div>
</div>

언급URL : https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox