jquery implements full screen scrolling_jquery

In many cases, we need full-screen scrolling of the page, especially on mobile. Today I will briefly introduce the knowledge of full-screen scrolling.

1. The principle of full-screen scrolling
1.js dynamically obtains the height of the screen.

Get the height of the screen and set the height of each screen.

2. Listen to mousewheel events.

Listen to the mousewheel event and determine the direction of the wheel to scroll up or down one screen.

2. Introduction to jQuery plug-in fullpages
fullPage.js is a plug-in based on jQuery. It can easily and conveniently create a full-screen website. The main functions are:

• Support mouse scrolling
• Supports forward, backward and keyboard control
• Multiple callback functions
• Support touch events on mobile phones and tablets
• Support CSS3 animation
• Support window scaling
• Automatically adjust when the window is zoomed
• Can set scroll width, background color, scroll speed, loop options, callbacks, text alignment, etc.

How to use

1. Import files

<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>

Each section represents one screen, and the "first screen" is displayed by default. If you want to specify the "screen" displayed when loading the page, you can add class="active" to the corresponding section, such as:

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

At the same time, you can add slide (swipe left and right) inside the section, such as:

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

Many configurations can be performed:

$(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. Hand-written full-screen scrolling
Here we mainly introduce monitoring mousewheel events and scrolling.

Due to the compatibility of mousewheel events, the jquery-mousewheel plug-in is quoted to listen for wheel events.

The direction and speed of the mouse wheel can be obtained through the parameter delta (the old version needs to pass the delta parameter, the new version does not need to, use event to get it directly). If the value of delta is negative, then the scroll wheel scrolls down, and if the value of delta is positive, it scrolls up.

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

You can use fullpages to achieve full-screen scrolling (up, down, left and right) according to your needs, or you can use jquery-mousewheel to customize full-screen scrolling at different heights.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.