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

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

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

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

2024.08.25 20:42:41 12334 (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