많은 경우, 특히 모바일 기기에서는 페이지를 전체 화면으로 스크롤해야 합니다. 오늘은 전체화면 스크롤에 대한 지식을 간략히 소개하겠습니다.
1. 전체화면 스크롤의 원리
1.js는 화면 높이를 동적으로 가져옵니다.
화면 높이를 가져와서 각 화면의 높이를 설정하세요.
2. 마우스휠 이벤트를 듣습니다.
마우스휠 이벤트를 듣고 휠 방향을 결정하여 한 화면을 위아래로 스크롤합니다.
2. jQuery 플러그인 전체 페이지 소개
fullPage.js는 jQuery 기반의 플러그인으로 전체 화면 웹사이트를 쉽고 편리하게 만들 수 있습니다.
사용방법
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>第一屏</h3> </div> <div class="section"> <h3>第二屏</h3> </div> <div class="section"> <h3>第三屏</h3> </div> <div class="section"> <h3>第四屏</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을 사용하여 다양한 높이에서 전체 화면 스크롤을 맞춤설정할 수 있습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.