스크롤 체이닝 문제 해결을 위한 새 css 코드 적용

[leesm0218]

어떤 기능인가요?

스크롤링 적용 시, 스크롤 체이닝으로 인해 내부 컨텐츠 데이터가

header 나 navigationBar 에 영향을 미치는 상황이 발생할 수 있으므로,

이를 방지하기 위한 코드와 가이드 안내.

작업 상세 내용

origin/dev 브랜치를 기준으로, 현재 스타일 코드들을 일부 재작성한 코드를 PR

코드 사용 방법 가이드.

참고할만한 자료(선택)

[leesm0218]

슬랙에 공유된 내용을 다시 올립니다.

export const NAVIGATION_STYLE = {
  background:
    'flex justify-center w-full max-w-screen-md h-16 bg-purple-500 shadow-xl z-10',
  buttonList: 'flex w-full h-full items-center',
  button: 'flex-1 flex flex-col',
  buttonImage: 'h-6 md:h-8 object-contain',
  buttonText: 'text-xs mt-1 font-bold',
};

//Layout styles
export const LAYOUT_STYLE = {
  screenLayout: 'flex flex-col items-center h-screen',
  mainContainer: 'flex-1 flex min-h-0',
  pageContent: 'flex-1 flex flex-col min-h-0',
};

//notification styles
export const NOTIFICATION_STYLE = {
  background: 'flex-1 flex flex-col min-h-0',
  item_list: 'flex-1 flex flex-col overflow-y-auto overscroll-none',
  item: 'flex-1 max-height-100px',
};

이전에 보셨던 화면 코드입니다.
현재 제 코드에서는 outlet -> background -> item_list -> item(여러개) 형태로 되어있습니다.
늘어나는 list 에 overflow-y-auto overscroll-none 두개를 적용시키면 됩니다.

[leesm0218]

//Layout styles
export const LAYOUT_STYLE = {
  screenLayout: 'flex flex-col items-center h-screen',
  mainContainer: 'flex-1 flex w-full max-w-screen-md min-h-0',
  pageContent: 'flex-1 flex flex-col w-full max-w-screen-md min-h-0',
};

//notification styles
export const NOTIFICATION_STYLE = {
  background: 'flex-1 flex flex-col w-full max-w-screen-md min-h-0',
  item_list:
    'flex-1 flex flex-col w-full max-w-screen-md hide-scrollbar overflow-y-auto overscroll-none items-center',
  item: 'min-h-[100px]',
};

item_list 에서 item 들이 늘어나고 스크롤이 발생됩니다.

[soo96]

저는 아래와 같이 적용하여 해결했습니다.

// style.ts

export const LAYOUT_STYLE = {
  screenLayout: 'h-screen flex flex-col',
  mainContainer: 'flex-1 overflow-hidden flex justify-center pb-4',
  pageContent: 'w-full max-w-screen-md px-4 mt-4',
};

...

export const SUBSCRIPTION_PAGE_STYLE = {
  itemList:
    'space-y-4 px-4 pb-20 overflow-y-auto max-h-[calc(100vh-340px)] scrollbar-hide',
  paragraph: 'text-center text-m text-gray-500 mt-4 mb-2',
  bold: 'font-bold',
  boldWithColor: 'text-purple-500 font-semibold',
  chzzk: 'font-semibold text-green-500',
  youtube: 'font-semibold text-red-500',
};

[leesm0218]

//Layout styles
export const LAYOUT_STYLE = {
  screenLayout: 'h-screen flex flex-col',
  mainContainer: 'flex-1 flex justify-center min-h-0 pb-4',
  pageContent: 'flex-1 flex flex-col w-full max-w-screen-md min-h-0 px-4 mt-4',
};

현수씨꺼를 바탕으로 필요한것들을 붙여봤습니다. 이러면 max-h-[calc(100vh-340px)] 없이도 될 꺼에요.