플러그인 없이 jquery 전체 화면 스크롤-프런트엔드 Q&A-php.cn

플러그인 없이 jquery 전체 화면 스크롤

王林

풀어 주다： 2023-05-18 20:31:10

원래의

404명이 탐색했습니다.

웹 기술이 지속적으로 발전하면서 점점 더 많은 웹사이트에서 전체 화면 스크롤 효과를 사용하여 사용자가 한 페이지 내에서 여러 콘텐츠 영역을 탐색할 수 있게 되었습니다. 이 효과를 얻는 방법에는 여러 가지가 있으며 그 중 가장 일반적으로 사용되는 방법은 jQuery 플러그인을 사용하는 것입니다. 그런데 오늘 소개하고 싶은 것은 jQuery 플러그인을 사용하지 않고 전체 화면 스크롤을 구현하는 방법입니다.

HTML 구조

먼저 웹사이트의 HTML 구조를 결정해야 합니다. 이번 예시에서는 첫 번째 화면의 배경으로 이미지를 사용하고, 두 번째 화면에는 텍스트를 표시하겠습니다. 따라서 HTML 구조는 다음과 같아야 합니다.

<body>
  <div class="section section-1">
    <div class="bg-img"></div>
  </div>
  <div class="section section-2">
    <div class="text"></div>
  </div>
</body>

로그인 후 복사

보시다시피 전체 페이지를 두 부분으로 나누고 각 부분은 섹션이며 첫 번째 화면의 배경은 .bg-img 클래스가 있는 div입니다. 두 번째 화면에는 .text 클래스가 있는 div가 포함되어 있습니다.

CSS 스타일

다음으로 페이지에 스타일을 추가해야 합니다. 페이지 높이를 브라우저 창 높이로 설정하고 각 섹션의 높이를 100%로 설정해야 합니다. 동시에 나중에 페이지를 스크롤할 수 있도록 모든 섹션의 위치를 절대 위치로 설정해야 합니다.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.section {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.section-1 {
  background-color: #f9f9f9;
}

.bg-img {
  background-image: url('https://picsum.photos/1920/1080');
  background-size: cover;
  background-position: center;
  height: 100%;
}

.section-2 {
  background-color: #fff;
}

로그인 후 복사

JavaScript Code

이제 페이지 스크롤을 활성화하려면 웹사이트에 JavaScript 코드를 추가해야 합니다. 마우스 휠이나 키보드의 위쪽 및 아래쪽 화살표를 사용하여 페이지를 스크롤할 수 있습니다.

var sectionIndex = 0;
var sections = $('.section');
var totalSections = sections.length;

$(document).on('mousewheel DOMMouseScroll', function (e) {
  if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
    //向上滚动
    sectionIndex--;
  } else {
    //向下滚动
    sectionIndex++;
  }
  if (sectionIndex < 0) {
    sectionIndex = 0;
  }
  if (sectionIndex > totalSections - 1) {
    sectionIndex = totalSections - 1;
  }
  scrollToSection(sectionIndex);
});

$(document).keydown(function (e) {
  switch (e.which) {
    case 38: //向上箭头
      sectionIndex--;
      break;
    case 40: //向下箭头
      sectionIndex++;
      break;   
    default:
      return; 
  }
  if (sectionIndex < 0) {
    sectionIndex = 0;
  }
  if (sectionIndex > totalSections - 1) {
    sectionIndex = totalSections - 1;
  }
  scrollToSection(sectionIndex);    
});

function scrollToSection(sectionIndex) {
  $('html, body').animate({
    scrollTop: sections.eq(sectionIndex).offset().top
  }, 500);
}

로그인 후 복사

다음 스크롤을 위해 현재 화면 위치를 기록하기 위해 sectionIndex 변수를 정의했습니다. 또한 모든 섹션 요소를 저장하기 위해 섹션 변수와 섹션 수를 기록하기 위해 totalSections 변수를 정의했습니다.

다음으로, 사용자가 스크롤할 때 sectionIndex를 늘리거나 줄이고, sectionIndex 값이 전체 화면 수를 초과하는지 확인하여 마우스 휠과 키보드 위쪽 및 아래쪽 화살표에 대한 이벤트 리스너를 추가합니다. 화면은 합법적입니다. 마지막으로 scrollToSection 함수를 호출하여 대상 화면으로 이동합니다.

scrollToSection 함수는 jQuery의 animate 메소드를 사용하여 지정된 섹션의 위치로 부드럽게 스크롤합니다. 필요한 경우 스크롤 시간을 수정할 수도 있습니다.

결과 표시

마지막으로 jQuery 플러그인을 사용할 필요가 없는 전체 화면 스크롤 효과를 성공적으로 구현했습니다. 효과는 다음과 같습니다.

요약

이 글에서는 순수 JavaScript와 jQuery를 사용하여 전체 화면 스크롤 효과를 구현하는 방법을 소개하고 구현 효과도 시연했습니다. jQuery 플러그인을 사용하면 구현이 더 단순해질 수 있지만 기본 JavaScript를 사용하면 코드 뒤의 작동 원리와 논리를 더 잘 이해할 수 있고 스크롤 효과를 더 유연하게 사용자 정의할 수도 있습니다.

위 내용은 플러그인 없이 jquery 전체 화면 스크롤의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!