This article mainly introduces jquery to implement full-screen scrolling and elaborates on the full-screen scrolling knowledge. For more information, see the full-screen scrolling of pages in many cases, especially for 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