Intro 페이지의 스크롤바가 사라지지 않는 문제

Bug Report

개요

Intro 페이지는 스크롤을 내릴 때 (화면을 채운)컴포넌트 단위로 슬라이딩됩니다. 더 자연스러운 ui를 위해 스크롤바를 지우려 합니다.

그런데 Intro.tsx 페이지를 감싸는 가장 바깥 엘리먼트인 <IntroLayout/>에 스크롤 제거 css를 추가해도 스크롤바가 사라지지 않는 문제가 발생했습니다.

단, body에 적용하면 지워집니다. 하지만 그렇게 하면 스크롤바가 필요한 다른 페이지들도 다 지워집니다.

<IntroLayout>과 <body>에 모두 스크롤을 허용하고, 다음과 같이 body의 css에 padding 값을 주면 Intro.tsx의 스크롤바가 따로 존재하는 걸 볼 수 있습니다.(Screenshots 참고)

background-color: red;
padding: 30px;

이 상태에서 의 css에 스크롤 제거 코드를 추가하면 안쪽 스크롤바가 사라집니다.

body 스크롤바를 조작하는 코드를 추가할 수도 있겠지만, 그냥 <IntroLayout>의 스타일 영역에서 해결하고 싶습니다.

📸 Screenshots

<원하는 모습>

<Intro 스크롤과 body 스크롤이 따로 분리된 모습> Intro 위에서 Wheel을 내리면 안쪽 스크롤바가 움직이고, 바깥쪽은 정지. 빨간색 body 영역에서 Wheel을 내리면 바깥 스크롤바가 움직이고, 안쪽은 정지.

💻 Code

Intro.tsx - Intro 페이지

function Intro(){
  return(
  <IntroLayout ref={(element)=>{
    if(element !== null) {
    element.addEventListener("wheel", (event:WheelEvent)=>{
        wheelHandler(event, element)
    });
    }
  }}>
    <Header/>
    <Introduce>
            <h1>Welcome to Portfolly</h1>
            <h2>클라이언트와 파트너 간 소통해요</h2>
    </Introduce>
    <Dvider/>

    <Preview section='Android/iOS'/>
    <Dvider/>

    <Preview section='Web'/>
    <Dvider/>

    <Preview section='Illustration'/>
    <Dvider/>

    <Preview section='Graphics'/>
    <Dvider/>

    <Preview section='Video'/>
    <Footer/>
  </IntroLayout>
  )
}

Intro.styled.tsx - 이렇게 하면 스크롤바가 지워지지 않습니다.

export const IntroLayout= styled.div`
  width: 100%;
  height: 100vh;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
`;

GlobalStyle.tsx - 이렇게 하면 스크롤바가 지워집니다.

const GlobalStyle = createGlobalStyle`
  body {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
`;

🙁 Actual behavior

스크롤바와 body 스크롤바가 따로 존재하여, 둘 다 없애야 모든 스크롤바를 제거할 수 있습니다. 단, body의 스크롤바를 제거하게 됨으로써 다른 페이지에서도 스크롤바가 사라지게 됩니다. ### 🙂 Expected behavior Intro.tsx의 스크롤바가 body 스크롤바와 분리되지 않고 사라지면 좋겠습니다.
### 추가 사항

Kim-DaHam / Portfolly