그누보드 QA - gsap 사용 중 특정 div 안에 마우스가 들어가면 해당 div의 스크롤이 우선적으로 실행되게 하기

gsap 사용 중 특정 div 안에 마우스가 들어가면 해당 div의 스크롤이 우선적으로 실행되게 하기

냐냐냥뇨뇽 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.08.25 20:42:41 5251 (39.♡.♡.191)

답변 2

본문

안녕하세요 현재 gsap 사용해서 홈페이지 제작 중인데요 ㅜㅜ

마우스휠 스크롤 도중 특정 div 안에 마우스가 들어갈 경우 전체 스크롤을 멈추고

해당 div 내의 스크롤이 우선적으로 실행되게 한 다음

div의 스크롤이 끝에 도달하면 다시 전체 스크롤이 작동되게 하고 싶은데요

코드를 넣었는데 실행이 안 되는 것 같습니다...ㅠㅠ 도와주세요...

코드는 아래와 같습니다..

</figure>

</div>

<p>테스트제목</p>

</div>

<ul>

<li>

</div>

<span class="work-wordpress">WordPress</span>

</div>

</li>

<li>

</div>

<span class="work-sub-design">서브디자인</span>

</div>

</li>

<li>

<p>작업기여도</p>

</div>

</div>

</li>

</ul>

</div>

</div>

</article>

</figure>

</div>

<p>테스트제목</p>

</div>

<ul>

<li>

</div>

<span class="work-wordpress">WordPress</span>

</div>

</li>

<li>

</div>

<span class="work-sub-design">서브디자인</span>

</div>

</li>

<li>

<p>작업기여도</p>

</div>

</div>

</li>

</ul>

</div>

</div>

</article>

</figure>

</div>

<p>테스트제목</p>

</div>

<ul>

<li>

</div>

<span class="work-wordpress">WordPress</span>

</div>

</li>

<li>

</div>

<span class="work-sub-design">서브디자인</span>

</div>

</li>

<li>

<p>작업기여도</p>

</div>

</div>

</li>

</ul>

</div>

</div>

</article>

</figure>

</div>

<p>테스트제목</p>

</div>

<ul>

<li>

</div>

<span class="work-wordpress">WordPress</span>

</div>

</li>

<li>

</div>

<span class="work-sub-design">서브디자인</span>

</div>

</li>

<li>

<p>작업기여도</p>

</div>

</div>

</li>

</ul>

</div>

</div>

</article>

</figure>

</div>

<p>테스트제목</p>

</div>

<ul>

<li>

</div>

<span class="work-wordpress">WordPress</span>

</div>

</li>

<li>

</div>

<span class="work-sub-design">서브디자인</span>

</div>

</li>

<li>

<p>작업기여도</p>

</div>

</div>

</li>

</ul>

</div>

</div>

</article>

</figure>

</div>

<p>테스트제목</p>

</div>

<ul>

<li>

</div>

<span class="work-wordpress">WordPress</span>

</div>

</li>

<li>

</div>

<span class="work-sub-design">서브디자인</span>

</div>

</li>

<li>

<p>작업기여도</p>

</div>

</div>

</li>

</ul>

</div>

</div>

</article>

</div>

</section>

.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();

감사합니다 ㅠㅠ

#javascript

답변 2

제이앤 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-08-25 22:45:42 122.♡.♡.120

아래의 코드를 참고해 보시겠어요..

-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(); // 마우스 휠 이벤트 적용
});

세크티 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-08-25 23:11:33 122.♡.♡.19

gsap에 스크롤 트리거 플러그인 써보세요. pin 속성을 true로 하면 원하시는것처럼 될거같아요

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1

답변을 작성하시기 전에 로그인 해주세요.

QA

본문

이 질문에 댓글 쓰기 :

답변 2