안녕하세요, 선생님!
가로로 스크롤 되는 페이지를 만드는 과정에서 해결하지 못하여 질문 남깁니다..!
<section id="pub">
<div class="row">
<h2 data-txt="publishing">project</h2>
<ul class="row_box">
<li id="pub1">
요소들
</li>
<li id="pub2">
요소들
</li>
<li id="pub3">
요소들
</li>
</ul>
</div>
</section>
-----------------------------------------------------------------------
#pub{
position: relative;
width: 100vw;
height: 130vh;
}
#pub .row{
position: absolute;
top: 0;
width: 100%;
height: 120vh;
}
#pub .row_box{
display: flex;
position: relative;
width: 100%;
height: 1000px;
}
#pub .row_box>li{
display: flex;
position: relative;
width: 100%;
height: 100%;
}
-----------------------------------------------------------------------
$(window).scroll(function () {
let scrollTop = $(window).scrollTop();
let offset = scrollTop - $(".row_box").offset().top;
if (scrollTop > $(".row_box").offset().top) {
$(".row_box>li").css("left", -offset);
} else {
$(".row_box>li").css("left", -offset);
}
});
#pub 섹션 위에 다른 섹션들은 세로로 스크롤되다가 #pub 섹션에 오면 가로로 스크롤 되고,
#pub 콘텐츠가 끝나면 다시 세로로 스크롤하도록 만들고자 합니다.
위의 코드로 요소들이 가로로 움직이긴 하는데
문제는 가로로 스크롤 되는 동안 .row_box가 화면에 고정되지 않고 다음 섹션으로 (세로로)스크롤되어
.row_box>li가 가로로 끝까지 스크롤 되는 것을 볼 수가 없습니다ㅠㅠ
혹시 .row_box를 .row_box>li의 콘텐츠가 끝날 때까지만 고정시킬 수 있는 방법이 있을지 궁금합니다..!!ㅠ
다른 방식으로 코드를 다시 짜봐야 할까요..ㅠㅠ
