naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
https://naver.github.io/egjs-flicking/
MIT License
2.75k stars 128 forks source link

InfiniteGrid 와 중첩이 가능한가요? #663

Open meobead opened 2 years ago

meobead commented 2 years ago

Description

egjs-InfiniteGrid 와 중첩 가능할까요?

플리킹되는 패널중 일부에 무한스크롤을 적용하고 싶어 특정 패널에 infiniteGrid 를 붙이고자 합니다. 무한스크롤됨에 따라 패널의 height 값이 달라지게 되더라구요. adaptive: true 옵션을 통해 패널마다 height 값을 조정하게 했더니 infiniteGrid의 height값을 제대로 받아오지 못하는 이슈가 있네요.

조언을 구할 수 있을까요?

감사합니다.

Steps to check or reproduce

// ...

export default function App() {
  return (
    <Container>
      <Flicking adaptive={true} resizeOnContentsReady={true}>
        <Box key={1} color={"blue"} height={"500px"}>
          1
        </Box>
        <Box key={2} color={"red"} height={"1000px"}>
          2
        </Box>
        <Box key={3} color={"black"} height={"100%"}>
            {/* infiniteGrid view */}
          <InfiniteGrid />
        </Box>
      </Flicking>
    </Container>
  );
}
WoodNeck commented 2 years ago

@meobead님 안녕하세요. adaptive 사용시 패널 높이가 동적으로 변화하는 것까지는 감지하지 못합니다. 때문에, 패널 높이가 변경되는 순간에 (infinitegrid 패널 추가 등) Flicking의 resize 메소드를 호출해주셔야 합니다.

다만, InfiniteGrid는 실제 스크롤 기반으로 동작하는 컴포넌트이기 때문에 패널의 높이를 조정하시기보다는 실제로 스크롤이 가능하도록 구성해보시는 것이 좋을 것 같은데요 adaptive 옵션을 사용하시기보다는 Flicking 패널 높이를 고정으로 두시고 (1000px 등) 패널 CSS에 overflow 속성을 autoscroll로 걸어보시면 어떨까 합니다.