Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

메인 가치 섹션 풀 페이지 스크롤 #303

Closed
wants to merge 1 commit into from

Conversation

solar3070
Copy link
Member

Summary

Screenshot

Comment

  • 코드 정리가 안되어 있는 상태입니다만.. 일단 드래프트 올려둘게요..!

@SeojinSeojin
Copy link
Member

과제 하나만 내고 보겠습니다..!!

Comment on lines +20 to +24
if (currentPage.current === PAGE_LENGTH - 1) {
positionY += 240;
} else if (currentPage.current !== -1) {
positionY += 120;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거는 어떤 부분인가요..??

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 섹션 상하단에 있는 sticky 요소 크기입니다!!

@SeojinSeojin
Copy link
Member

wrapper의 크기를 3으로 나누어서 다음 스크롤 위치를 구하셨는데, 이 값이 제대로 되지 않았을 수 있어요..!!
스크롤될 div를 심어 두고, 그것의 scrollTop으로 구하셔도 좋을 것 같다는 생각이 듭니다!!

또한, 어느 부분에서 어떤 식으로 에러가 재현되는지 말씀 주심 감사하겠습니다!!
너무 시간 많이 잡아먹게 하여서 죄송한 마음이 큽니다.......

Copy link
Member Author

@solar3070 solar3070 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

에러라기 보다는 슬랙에 올렸던대로 다음과 같은 이슈입니다..

요약하자면 가치 섹션 내부와 내부에서 바깥으로 나갈 때는 딱딱 멈추게 할 수 있지만 바깥에서 해당 섹션으로 들어올 때 가치 섹션의 시작(첫 번째 가치) 혹은 끝(세 번째 가치)에 걸리게 할 방법을 모르는 게 문제입니다..!

스크롤될 div를 심어 두고, 그것의 scrollTop으로 구하셔도 좋을 것 같다

이건 해봤는데 잘 안됐던 걸로 기억하는데.. 이유가 기억 안나서 다시 해볼게요

Copy link
Member Author

@solar3070 solar3070 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음 뭔가 생각할수록 이 기능이 애매한게..
메인 페이지 전체가 풀페이지 스크롤이 아니다보니 이런 거 같은데

저는 개인적으로 사용자가 페이지 가장 상단에서 하단으로 빠르게 이동하고 싶을 때 강하게 스크롤하면 그 부분까지 확 내려가는 게 ux상으로 좋다고 생각하거든요
근데 제가 구현하고자 했던 것처럼 해당 섹션의 상하단에서 딱딱 멈춰서 강제로 이 섹션의 각 페이지를 지정한 초만큼 봐야한다면 짜증이 날 것 같기도 해요
이런 이유 때문에 일반적인 풀 페이지 스크롤에 dot 버튼이 있다고 생각하기도 하고요..

가장 예쁜 정중앙 부분에서 딱딱 멈추면 정말 좋을 거 같긴한데.. 모르겠네요
이러한 부분에 대해 어떻게 생각하시는지 궁금해요

@SeojinSeojin
Copy link
Member

SeojinSeojin commented Dec 5, 2023

저는 개인적으로 사용자가 페이지 가장 상단에서 하단으로 빠르게 이동하고 싶을 때 강하게 스크롤하면 그 부분까지 확 내려가는 게 ux상으로 좋다고 생각하거든요

이런 경우엔 강하게 스크롤하면 아래로 확 내려가고, 약하게 스크롤하면 딱딱 멈춰주는게 좋다고 생각합니다!
(onWheel 리스너에서 deltaX가 특정값 이상이면 보내주고, 이하면 멈춰주도록 하는 방식으로요)

@SeojinSeojin
Copy link
Member

그런 레퍼런스가 있는지 찾아볼게요..!

@SeojinSeojin
Copy link
Member

배민 : 스크롤 크기 인식X 브라우저 스크롤바 일부러 숨겼고, 닷으로 이동 가능 https://www.baemin.com/
야놀자 : 스크롤 속도만 느리게 하고 특정 위치에서 멈추게 하진 않았음 https://www.yanolja.in/

대략 스무군데 정도 둘러보았는데, 생각보다 스크롤에 무슨 짓을 한 사이트가 많지 않다는 걸 깨달았습니다. (외국 사이트들은 쿠키 허용 창이나 띄우고,,)
다음엔 공수 큰 일을 말씀드릴 땐 다른 레퍼런스 좀 찾아보고 말씀드리겠습니다 ㅜㅜ

Copy link
Member Author

@solar3070 solar3070 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음 그럼 스크롤하다가 중간에 이렇게 애매하게 걸리는 경우는 어떡할까요..?

2023-12-05.10.32.45.mov

Copy link
Member Author

@solar3070 solar3070 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제가 이미 다 봤던 사이트들이군요... 🥹😅

@SeojinSeojin
Copy link
Member

레퍼런스 찾아본 소감

  1. 다들 스크롤이 멈추도록 하는 이벤트를 걸지 않는다.. 스크롤 내리다가 너가 관심있는 정보가 있으면 멈춰서 보렴! 이런 느낌
  2. 스크롤에 뭔가를 건 곳은, (1) 부분적으로 걸지 않고 전체에 건다 (2) dot을 둬서 이동하고 싶으면 이동할 수 있게 한다

따라서 저는 아예 적용하지 않는 것에도 찬성입니다 ..

@SeojinSeojin
Copy link
Member

어도비, 마이크로소프트, 애플이 신경쓰지 않는것이면 저도 신경쓰지 않기로 하였읍니다. ..
이 친구들 랜딩페이지에선 반응형도 깨지더라구여,,

Copy link
Member Author

@solar3070 solar3070 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

노말 스크롤 사이에 있는 풀 페이지 스크롤 레퍼런스를 정말 열심히 찾았는데 못 찾은데는 이유가 있구나 싶습니다.. 일단 그럼 이 드래프트는 close 하도록 하겠습니다..!!
그래도 풀 페이지 스크롤을 구현해봐서 재밌었어요!!! 미안해하지 않으셔도 됩니다!! 💕

@SeojinSeojin
Copy link
Member

옙.. 먼가 수요가 없는 기술이었던 것 같습니다 ㅜㅜ 스크롤 기다렸다가 페이드인 하는게 제일 많이 보이네용
다음에 어딘가 쓸 일이 있기를 바라요....

@solar3070 solar3070 closed this Dec 5, 2023
@solar3070 solar3070 deleted the feat/#302-main-value-fullpage branch December 5, 2023 15:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants