drawer in m.youtube

ytm-engagement-panel
    ytm-engagement-panel-section-list-renderer.engagement-panel-comments-section
        .engagement-panel-section-list-background.draggable
          .engagement-panel-container
              .engagement-panel-section-list-header-wrapper
              .engagement-panel-content-wrapper
                  ytm-section-list-renderer

ytm-single-column-watch-next-results-renderer aria-hidden

.player-size {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; (16:9)
    overflow: hidden;
    background-color: #000;
}

. ...panel {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: calc(56.25vw + 48px);
    z-index: 2;
}

. ...section-list, ...renderer {
  height: 100%;
}

. ...background {
    flex-grow: 1;
}

. ...header {
    display: sticky;
}

. ... content-wrapper {
    flex: 1;
      overflow-y: auto;
}

 

Drawer를 만들 일이 있어서 유튜브 웹 접속할 때 뜨는 댓글창의 클래스와 CSS를 잠깐 살펴봤다. 일종의 모달인데 여러 겹의 wrapper를 만들어서 관리하는 게 생각보다 까다롭다. 그리고 모달 같은 경우는 제스처에 영향을 많이 받아서 모바일 반응형을 개발하는 데에도 생각보다 손이 많이 간다. 여기에 스크롤 제어 까지 더해지면 그야말로 아찔...