Jquery supports full-screen scrolling, while jquery supports full-screen scrolling.

Jquery supports full-screen scrolling, while jquery supports full-screen scrolling.

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

I. Principle of full screen scrolling
1. js dynamically obtains the screen height.

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

2. Listen to the mousewheel event.

Listen to the mousewheel event, and judge the scroll wheel direction, scroll up or down a screen.

II. Introduction to jQuery plug-in fullpages
FullPage. js is a jQuery-based plug-in that can easily create full-screen websites. Its main functions include:

• Supports mouse scrolling
• Supports forward and backward navigation and keyboard control
• Multiple callback Functions
• Support for mobile phone and tablet touch events
• Supports CSS3 Animation
• Supports Window Scaling
• Auto adjust when the window is scaled
• You can set the scroll width, background color, scroll speed, loop options, callback, and text alignment.

Usage

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"> 
Each section represents a screen. The "first screen" is displayed by default. to specify the "screen" displayed when loading the page, you can add class = "active" to the corresponding section, for example:

<Div class = "section active"> Screen 3 </div>
In addition, you can add slide (slide between left and right) to the section, such:

<Div id = "fullpages"> <div class = "section"> Screen 1 </div> <div class = "section"> screen 2 </div> <div class = "section"> <div class = "slide"> the first screen of the third screen </div> <div class = "slide"> the second screen of the third screen </div> <div class = "slide"> third screen </div> <div class = "slide"> fourth screen </div> <div class = "section"> fourth screen </div>
3. JavaScript

$(function(){  $('#fullpages').fullpage();});
You can perform multiple configurations:

$(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. Write full screen scrolling
This section describes how to listen to mousewheel events and scroll.
Because of the compatibility of mousewheel events, the jquery-mousewheel plug-in is referenced to listen to wheel events.
You can use the delta parameter to obtain the direction and speed of the scroll wheel. (The delta parameter is required in the old version. If the new version is not required, you can use the event directly ). If the delta value is negative, the scroll wheel is scroll down, and the positive is upward.

// 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 implement full screen scrolling (up and down, left and right) as needed, or use jquery-mousewheel to customize full screen scrolling at different heights.
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

 

 
  
JQuery multismultismultismultiscrocro
 
  
JQuery implements a full-screen scrolling album instance with scroll navigation Effect
 
  
Implement full-screen dynamic rolling plug-in fullPage Based on JQuery
 
  
Implement full-screen scrolling Based on jquery