jquery는 전체 화면 scrolling_jquery를 구현합니다.

많은 경우, 특히 모바일 기기에서는 페이지를 전체 화면으로 스크롤해야 합니다. 오늘은 전체화면 스크롤에 대한 지식을 간략히 소개하겠습니다.

1. 전체화면 스크롤의 원리
1.js는 화면 높이를 동적으로 가져옵니다.

화면 높이를 가져와서 각 화면의 높이를 설정하세요.

2. 마우스휠 이벤트를 듣습니다.

마우스휠 이벤트를 듣고 휠 방향을 결정하여 한 화면을 위아래로 스크롤합니다.

2. jQuery 플러그인 전체 페이지 소개
fullPage.js는 jQuery 기반의 플러그인으로 전체 화면 웹사이트를 쉽고 편리하게 만들 수 있습니다.

• 마우스 스크롤 지원
• 앞으로, 뒤로 및 키보드 제어 지원
• 다양한 콜백 함수
• 휴대폰 및 태블릿에서 터치 이벤트 지원
• CSS3 애니메이션 지원
• 창 크기 조정 지원
• 창이 확대되면 자동으로 조정
• 스크롤 너비, 배경색, 스크롤 속도, 루프 옵션, 콜백, 텍스트 정렬 등을 설정할 수 있습니다.

사용방법

1. 파일 가져오기

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2. HTML

<div id="dowebok">
  <div class="section">
    <h3 id="第一屏">第一屏</h3>
  </div>
  <div class="section">
    <h3 id="第二屏">第二屏</h3>
  </div>
  <div class="section">
    <h3 id="第三屏">第三屏</h3>
  </div>
  <div class="section">
    <h3 id="第四屏">第四屏</h3>
  </div>
</div>

각 섹션은 하나의 화면을 나타내며 기본적으로 "첫 번째 화면"이 표시됩니다. 페이지를 로드할 때 표시되는 "화면"을 지정하려면 다음과 같이 해당 섹션에 class="active"를 추가하면 됩니다. :

<div class="section active">第三屏</div>

동시에 다음과 같이 섹션 내부에 슬라이드를 추가(왼쪽 및 오른쪽으로 스와이프)할 수 있습니다.

<div id="fullpages">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">
    <div class="slide">第三屏的第一屏</div>
    <div class="slide">第三屏的第二屏</div>
    <div class="slide">第三屏的第三屏</div>
    <div class="slide">第三屏的第四屏</div>
  </div>
  <div class="section">第四屏</div>
</div>

3. 자바스크립트

$(function(){
  $('#fullpages').fullpage();
});

다양한 구성을 수행할 수 있습니다.

$(document).ready(function() {
  $('#fullpages').fullpage({
    //Navigation
    menu: '#menu',
    lockAnchors: false,
    anchors:['firstPage', 'secondPage'],
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    showActiveTooltip: false,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',

    //Scrolling
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 1000,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: false,
    touchSensitivity: 15,
    normalScrollElementTouchThreshold: 5,

    //Accessibility
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    //Design
    controlArrows: true,
    verticalCentered: true,
    resize : false,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,

    //Custom selectors
    sectionSelector: '.section',
    slideSelector: '.slide',

    //events
    onLeave: function(index, nextIndex, direction){},
    afterLoad: function(anchorLink, index){},
    afterRender: function(){},
    afterResize: function(){},
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
  });
});

3. 손글씨 전체화면 스크롤
여기에서는 마우스휠 이벤트 모니터링과 스크롤링을 주로 소개합니다.

마우스휠 이벤트의 호환성으로 인해 휠 이벤트를 수신하기 위해 jquery-mousewheel 플러그인이 인용됩니다.

마우스 휠의 방향과 속도는 델타 매개변수를 통해 얻을 수 있습니다(이전 버전은 델타 ​​매개변수를 전달해야 하지만 새 버전은 필요하지 않습니다. 이벤트를 사용하여 직접 가져옵니다). delta 값이 음수이면 스크롤 휠이 아래로 스크롤되고, 양수이면 위로 스크롤됩니다.

// using on
$('#my_elem').on('mousewheel', function(event) {
  console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
  console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

전체 페이지를 사용하여 필요에 따라 전체 화면 스크롤(위, 아래, 왼쪽, 오른쪽)을 수행하거나 jquery-mousewheel을 사용하여 다양한 높이에서 전체 화면 스크롤을 맞춤설정할 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.