gsap 사용 중 특정 div 안에 마우스가 들어가면 해당 div의 스크롤이 우선적으로 실행되게 하기
안녕하세요 현재 gsap 사용해서 홈페이지 제작 중인데요 ㅜㅜ
마우스휠 스크롤 도중 특정 div 안에 마우스가 들어갈 경우 전체 스크롤을 멈추고
해당 div 내의 스크롤이 우선적으로 실행되게 한 다음
div의 스크롤이 끝에 도달하면 다시 전체 스크롤이 작동되게 하고 싶은데요
코드를 넣었는데 실행이 안 되는 것 같습니다...ㅠㅠ 도와주세요...
코드는 아래와 같습니다..
.portfolio { overflow: hidden; width: 100vw; height: 100vh; }
.portfolio .portfolio-contents-wrap { position: absolute; left: 0; bottom: -300vh; display: flex; align-items: center; width: 100vw; height: 100vh; background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.portfolio-contents-inner { overflow-y: scroll; display: flex; align-items: center; flex-wrap: wrap; gap: 40px; height: calc(100vh - 300px); max-width: 1300px; padding: 0 20px; margin: 0 auto; }
.portfolio-work { width: calc((100% - 40px) / 2); padding: 30px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.5); }
.work-thum { width: 100%; height: 250px; margin-bottom: 20px; background-color: #f90; }
.work-tit { margin-bottom: 5px; font-size: 25px; }
.work-txtwrap ul li { display: flex; align-items: center; gap: 20px; padding: 5px 0; }
.work-desc span { display: inline-block; padding: 3px 5px; border-radius: 3px; background-color: #000; color: #fff; }
.img-box { overflow: hidden; height: 100%; }
.img-box img { width: 100%; }
$.fn.extend({
mouse_wheel: function() {
$(this).on('mousewheel DOMMouseScroll', function(e) {
e.preventDefault(); // 기본 스크롤 방지
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
var $this = $(this);
// 현재 스크롤 위치
var scrollTop = $this.scrollTop();
var scrollHeight = $this[0].scrollHeight;
var height = $this.outerHeight();
// 상단에 도달했지만 이전 스크롤은 상단에 도달하지 않은 경우
if (delta > 0 && scrollTop <= 0 && scrollHeight > height) {
$this.scrollTop(scrollTop - delta);
return false; // 상위 스크롤로 넘어가지 않음
}
// 하단에 도달했지만 이전 스크롤은 하단에 도달하지 않은 경우
if (delta < 0 && scrollTop + height >= scrollHeight && scrollHeight > height) {
$this.scrollTop(scrollTop - delta);
return false; // 상위 스크롤로 넘어가지 않음
}
// 영역 내부 스크롤 처리
$this.scrollTop(scrollTop - delta);
});
}
});
$('.portfolio-contents-inner').mouse_wheel();
감사합니다 ㅠㅠ
답변 2개
gsap에 스크롤 트리거 플러그인 써보세요. pin 속성을 true로 하면 원하시는것처럼 될거같아요
댓글을 작성하려면 로그인이 필요합니다.
아래의 코드를 참고해 보시겠어요..
-JavaScript 수정
$(document).ready(function () { const $portfolioInner = $('.portfolio-contents-inner');
// 전체 스크롤을 비활성화하는 함수 function disableScroll() { $('body').css('overflow', 'hidden'); }
// 전체 스크롤을 활성화하는 함수 function enableScroll() { $('body').css('overflow', 'auto'); }
// mouse wheel 이벤트를 처리하는 함수 $.fn.extend({ mouse_wheel: function () { $(this).on('mousewheel DOMMouseScroll', function (e) { e.preventDefault(); // 기본 스크롤 방지
let delta = e.originalEvent.wheelDelta || -e.originalEvent.detail; let $this = $(this); let scrollTop = $this.scrollTop(); let scrollHeight = $this[0].scrollHeight; let height = $this.outerHeight();
// 상단에 도달했지만 이전 스크롤은 상단에 도달하지 않은 경우 if (delta > 0 && scrollTop <= 0 && scrollHeight > height) { $this.scrollTop(scrollTop - delta); return false; // 상위 스크롤로 넘어가지 않음 }
// 하단에 도달했지만 이전 스크롤은 하단에 도달하지 않은 경우 if (delta < 0 && scrollTop + height >= scrollHeight && scrollHeight > height) { $this.scrollTop(scrollTop - delta); return false; // 상위 스크롤로 넘어가지 않음 }
// 영역 내부 스크롤 처리 $this.scrollTop(scrollTop - delta); }); } });
// 포트폴리오 콘텐츠 내부에서 마우스가 들어갈 때 $portfolioInner.on('mouseenter', function () { disableScroll(); // 전체 스크롤 비활성화 });
// 포트폴리오 콘텐츠 내부에서 마우스가 나갈 때 $portfolioInner.on('mouseleave', function () { enableScroll(); // 전체 스크롤 활성화 });
$portfolioInner.mouse_wheel(); // 마우스 휠 이벤트 적용 });
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
