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

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

QA

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

본문

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

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

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

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

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

 

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

 

    <section class="mainSec mainSec5 portfolio">

      <div class="portfolio-contents-wrap">

        <div class="portfolio-contents-inner">

          <article class="portfolio-work">

            <div class="work-contents">

              <div class="work-thum" data-img="#img1">

                <figure class="img-box">

                  <img src="/img/portfolio-img01.png" alt>

                </figure>

              </div>

                <div class="work-tit">

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

                </div>

              <div class="work-txtwrap">

                <ul>

                  <li>

                    <div class="work-solution">

                      <p>솔루션</p>

                    </div>

                    <div class="work-desc">

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

                      <p>작업범위</p>

                    </div>

                    <div class="work-desc">

                      <span class="work-main">메인</span>

                      <span class="work-sub">서브</span>

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

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

                    </div>

                    <div class="work-desc">

                      <span class="work-contribution">100%</span>

                    </div>

                  </li>

                </ul>

              </div>

              <div class="portfolio-contents-btn">

                <a href="#">사이트 이동</a>

                <a href="#">자세히 보기</a>

              </div>

            </div>

          </article>

          <article class="portfolio-work">

            <div class="work-contents">

              <div class="work-thum" data-img="#img2">

                <figure class="img-box">

                  <img src="/img/portfolio-img01.png" alt>

                </figure>

              </div>

                <div class="work-tit">

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

                </div>

              <div class="work-txtwrap">

                <ul>

                  <li>

                    <div class="work-solution">

                      <p>솔루션</p>

                    </div>

                    <div class="work-desc">

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

                      <p>작업범위</p>

                    </div>

                    <div class="work-desc">

                      <span class="work-main">메인</span>

                      <span class="work-sub">서브</span>

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

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

                    </div>

                    <div class="work-desc">

                      <span class="work-contribution">100%</span>

                    </div>

                  </li>

                </ul>

              </div>

              <div class="portfolio-contents-btn">

                <a href="#">사이트 이동</a>

                <a href="#">자세히 보기</a>

              </div>

            </div>

          </article>

          <article class="portfolio-work">

            <div class="work-contents">

              <div class="work-thum" data-img="#img3">

                <figure class="img-box">

                  <img src="/img/portfolio-img01.png" alt>

                </figure>

              </div>

                <div class="work-tit">

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

                </div>

              <div class="work-txtwrap">

                <ul>

                  <li>

                    <div class="work-solution">

                      <p>솔루션</p>

                    </div>

                    <div class="work-desc">

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

                      <p>작업범위</p>

                    </div>

                    <div class="work-desc">

                      <span class="work-main">메인</span>

                      <span class="work-sub">서브</span>

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

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

                    </div>

                    <div class="work-desc">

                      <span class="work-contribution">100%</span>

                    </div>

                  </li>

                </ul>

              </div>

              <div class="portfolio-contents-btn">

                <a href="#">사이트 이동</a>

                <a href="#">자세히 보기</a>

              </div>

            </div>

          </article>

          <article class="portfolio-work">

            <div class="work-contents">

              <div class="work-thum" data-img="#img4">

                <figure class="img-box">

                  <img src="/img/portfolio-img01.png" alt>

                </figure>

              </div>

                <div class="work-tit">

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

                </div>

              <div class="work-txtwrap">

                <ul>

                  <li>

                    <div class="work-solution">

                      <p>솔루션</p>

                    </div>

                    <div class="work-desc">

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

                      <p>작업범위</p>

                    </div>

                    <div class="work-desc">

                      <span class="work-main">메인</span>

                      <span class="work-sub">서브</span>

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

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

                    </div>

                    <div class="work-desc">

                      <span class="work-contribution">100%</span>

                    </div>

                  </li>

                </ul>

              </div>

              <div class="portfolio-contents-btn">

                <a href="#">사이트 이동</a>

                <a href="#">자세히 보기</a>

              </div>

            </div>

          </article>

          <article class="portfolio-work">

            <div class="work-contents">

              <div class="work-thum" data-img="#img5">

                <figure class="img-box">

                  <img src="/img/portfolio-img01.png" alt>

                </figure>

              </div>

                <div class="work-tit">

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

                </div>

              <div class="work-txtwrap">

                <ul>

                  <li>

                    <div class="work-solution">

                      <p>솔루션</p>

                    </div>

                    <div class="work-desc">

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

                      <p>작업범위</p>

                    </div>

                    <div class="work-desc">

                      <span class="work-main">메인</span>

                      <span class="work-sub">서브</span>

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

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

                    </div>

                    <div class="work-desc">

                      <span class="work-contribution">100%</span>

                    </div>

                  </li>

                </ul>

              </div>

              <div class="portfolio-contents-btn">

                <a href="#">사이트 이동</a>

                <a href="#">자세히 보기</a>

              </div>

            </div>

          </article>

          <article class="portfolio-work">

            <div class="work-contents">

              <div class="work-thum" data-img="#img6">

                <figure class="img-box">

                  <img src="/img/portfolio-img01.png" alt>

                </figure>

              </div>

                <div class="work-tit">

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

                </div>

              <div class="work-txtwrap">

                <ul>

                  <li>

                    <div class="work-solution">

                      <p>솔루션</p>

                    </div>

                    <div class="work-desc">

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

                      <p>작업범위</p>

                    </div>

                    <div class="work-desc">

                      <span class="work-main">메인</span>

                      <span class="work-sub">서브</span>

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

                    </div>

                  </li>

                  <li>

                    <div class="work-solution">

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

                    </div>

                    <div class="work-desc">

                      <span class="work-contribution">100%</span>

                    </div>

                  </li>

                </ul>

              </div>

              <div class="portfolio-contents-btn">

                <a href="#">사이트 이동</a>

                <a href="#">자세히 보기</a>

              </div>

            </div>

          </article>

        </div>

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

 

 

감사합니다 ㅠㅠ

이 질문에 댓글 쓰기 :

답변 2

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

 

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

 

 

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT