多くの場合、特にモバイルでは、ページを全画面でスクロールする必要があります。今日は全画面スクロールの知識を簡単に紹介します。
1. 全画面スクロールの原理
1.js は画面の高さを動的に取得します。
画面の高さを取得し、各画面の高さを設定します。
2. マウスホイール イベントをリッスンします。
マウスホイール イベントをリッスンし、1 画面上または下にスクロールするホイールの方向を決定します。
2. jQuery プラグインのフルページの紹介
fullPage.js は、jQuery をベースにしたプラグインで、フルスクリーン Web サイトを簡単かつ便利に作成できます。
使用方法
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>
各セクションは 1 つの画面を表し、デフォルトでは「最初の画面」が表示されます。ページをロードするときに表示される「画面」を指定したい場合は、対応するセクションに 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. JavaScript
$(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 プラグインが引用されています。
マウス ホイールの方向と速度は、パラメーター デルタを通じて取得できます (古いバージョンではデルタ パラメーターを渡す必要がありますが、新しいバージョンではその必要はありません。イベントを使用して直接取得します)。デルタの値が負の場合、スクロール ホイールは下にスクロールし、デルタの値が正の場合、上にスクロールします。
// 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 を使用してさまざまな高さでの全画面スクロールをカスタマイズしたりできます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。