Skip to content

Full page sections (Fixed touch on mobile, and osx inertia problems).

Notifications You must be signed in to change notification settings

sandrodz/jQuery.scrollSections

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jQuery Scroll Sections Plugin (Version 0.4.4)

A plugin that allows you to define (full page) sections and scroll between them with mousewheel, keyboard, scrollbar and/or touch moves.

Here is a very simple demo

Requirement (for a full support)

The following jQuery plugins are required for this plugin to work properly:

Examples

Here is a basic example

$('.my_sections').scrollSections();

Here is a example with custom navigation (full implementation in ./example/customNavigation.html)

$('.my_sections').scrollSections({
	createNavigation: false,
	navigation: true
});	

Here is a full options example

$('.my_sections').scrollSections(
{
    // Attribute from which we retrieve the unique identifier for each section.
	attr: 'id',
	// The class that should be applied to the current navigation item.
	active: 'active-scrollsection',
	// Enable keyboard controls.
	keyboard: true,
	// Enable mousehweel controls.
	mousewheel: true,
	// Enable touch controls.
	touch: true,
	// Enable scrollbar controls.
	scrollbar: true,
	// Enable navigation controls, also see createNavigation option.
	navigation: true,
	// Maximum sections to scroll within mousewheel interaction.
	scrollMax: 1,
	// Function to execute before each scroll.
	// $currentSection [jQuery object] - the current visible section
	// $nextSection [jQuery object] - the futur selected section
	before: function($currentSection, $nextSection){},
	// Function to execute after each scroll.
	// $currentSection [jQuery object] - the current visible section
	// $previousSection [jQuery object] - the previous section
	after: function($currentSection, $previousSection){},
	// Prefix for classes and ids of DOM elements.
	prefix: 'scrollsections',
	// Scroll to first section on initialization, instead of the section that is visible. Also have a look at the option
	// animateScrollToFirstSection.
	alwaysStartWithFirstSection: false,
	// Scroll to initial section without animation.
	animateScrollToFirstSection: false,
	// Create navigation? If the option navigation is set to false, this will have no effect!
	createNavigation: true,
	// The animation speed.
	speed: 500,
	// Throw execption if something goes wrong.
	exceptions: false
});

Cross-browser Compatibility

Modern browsers: Chrome, Firefox, Safari, Opera and IE8+

License

Under MIT license
Copyright(c) 2011-2013 Stéphane Guigné

Logs

v0.4.4 - fixed mobile touch issues, fixed osx inertia problem with apple magic mouse and trackpad.
v0.4.3 - send back arguments to callback functions

About

Full page sections (Fixed touch on mobile, and osx inertia problems).

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 92.7%
  • CSS 7.3%