Scroll Fog

설치Copy Anchor Link

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/scroll-fog.json

PrincipleCopy Anchor Link

Scroll Fog는 스크롤 영역 위에 덧씌워지는 스타일링 유틸리티예요. 스크롤 컨테이너 자체가 되며, 가장자리에 CSS mask를 적용해 콘텐츠가 투명하게 사라지도록 해요. 배경색을 덮는 방식이 아니라서 어떤 배경(Layer Basement, Default, Floating) 위에서도 자연스럽게 전환돼요.

Scroll Fog는 Scroll Area보다 단순한, 스크롤 힌트만을 위한 컴포넌트예요. 부모 요소에 높이(또는 너비)를 지정하면 그 안에서 스크롤돼요.

<div className="h-[300px]">
  <ScrollFog>
    <div className="py-[20px]">스크롤 가능한 콘텐츠</div>
  </ScrollFog>
</div>

PropertiesCopy Anchor Link

PlacementCopy Anchor Link

placement 는 스크롤 가능한 콘텐츠가 넘쳐서 가려지는 지점을 지정해요. 일반적으로 스크롤 영역의 경계와 일치해요. 기본값은 ["top", "bottom"] 이에요.

SizeCopy Anchor Link

기본 크기는 20px이에요. size 로 전체 크기를, sizes 로 방향별 크기를 지정할 수 있어요.

Hide ScrollbarCopy Anchor Link

hideScrollBar 로 스크롤바를 숨길 수 있어요. 가로 칩 목록처럼 스크롤바가 시각적으로 방해될 때 사용해요.

GuidelinesCopy Anchor Link

적절한 Scroll Fog 크기 찾기Copy Anchor Link

Scroll Fog의 크기(높이 또는 너비)는 최소 20px이에요.

• 세로 스크롤: 콘텐츠가 남아 있음을 충분히 알리면서도 중요한 정보를 과도하게 가리지 않아야 해요. 화면 전체를 차지하는 경우 하단 80px, 상단 20px을 권장해요.
• 가로 스크롤: 세로 스크롤보다 정보가 밀집될 가능성이 높아요. 좌우 20px을 권장해요.

스크롤 영역 크기에 비례해 정할 수도 있어요. 충분히 부드럽게 보이도록 스크롤 영역 크기의 15%~20% 사이를 권장해요.

Scroll Fog와 Padding의 관계Copy Anchor Link

Fog 깊이가 40px로 정해졌다면, 이 값은 시각 효과의 크기일 뿐 아니라 콘텐츠 영역에 확보해야 할 padding의 기준이 돼요. 그래야 스크롤을 끝까지 했을 때 콘텐츠가 경계에 붙거나 흐려진 채로 남지 않아요. Fog 깊이를 정하는 순간 그 값이 곧 최소 padding이에요.

// 상하 스크롤: 상하 padding 확보
<ScrollFog placement={['top', 'bottom']}>
  <div className="pt-[20px] pb-[80px]">...</div>
</ScrollFog>

// 좌우 스크롤: 좌우 padding 확보
<ScrollFog placement={['left', 'right']}>
  <div className="px-[20px]">...</div>
</ScrollFog>

상시 표시Copy Anchor Link

스크롤 시작·정지 때마다 Fog가 나타나고 사라지면 불필요한 깜빡임(Flicker)이 생겨요. Scroll Fog는 스크롤 여부와 무관하게 항상 표시돼요.

PropsCopy Anchor Link