jQuery Scrollsteps - Handle mouse scrolling by steps

jQuery Scrollsteps is a lightweight jQuery plugin to handle mousescroll events by steps, handling many wheel types (click, inertia, etc.)

Mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel.

So, if you are trying to setup a page design where the user should be able to scroll through elements "one at a time", this can cause a lot of problems, especially frustration as this easily can render the scrolling not so fluid.

This jQuery plugin solves this problem, and provides callbacks for each scrolling "step" in all directions

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: amondit.github.io

1. INCLUDE JS FILES

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://amondit.github.io/jquery.scrollsteps.js/jquery.scrollsteps-full-min.js"></script>

2. HTML

<div id="page1" class="fullScreenPage">
	<h1>jQuery.ScrollSteps.js</h1>
	<h2>A lightweight jQuery plugin to handle mousescroll events by steps.</h2>
	<p class="downArrow">&darr;</p>
</div>
<div id="page2" class="fullScreenPage">
	<p class="mainText">Here we setup each page transition to each mousewheel "step" generated by the plugin.</p>
</div>
<div id="page3" class="fullScreenPage">
	<p class="mainText">It handles many mousewheel types (click wheels, trackpads, magic trackpads/mices, etc.).</p>
</div>
<div id="page4" class="fullScreenPage">
	<p class="mainText">Try scrolling in here...</p>
</div>
<div id="page5" class="fullScreenPage">
	<p class="mainText">Copyright &copy; 2014.</p>
</div>

3. JAVASCRIPT

var currentPageIndex = 0;
var numberOfPages = 5;
var pageHeight = 800;
function next(e){
  if(!(currentPageIndex == (numberOfPages - 1))){
		currentPageIndex++;
		pageScroll("body",currentPageIndex * pageHeight);
	}
}
function prev(e){
	if(!(currentPageIndex == 0)){
		currentPageIndex--;
		pageScroll("body",currentPageIndex * pageHeight);
	}
}
function pageScroll(element, position) {
	if(msIE.isOldIE()){
		$(element).animate({scrollTop:(position)}, 800, 'swing', function(){});
		return;
	}
	var translation = "translate3d(0,"+(-(position))+"px,0)";
	if(msIE.isIE()){
		if(msIE.getIEVersion()==9 ){
			translation = "translate(0,"+(-(position))+"px)";
		}
	}
	$(element).css({
		'transform': translation,
		'-webkit-transform': translation,
		'-moz-transform': translation,
		'-o-transform': translation,
		'-ms-transform': translation
	});
}

$( document ).ready(function() {

	$("body").scrollsteps({
		up: prev,
		down: next
	});
});

4. OPTIONS

transitionDuration: 2000, // Duration of the main transition event,
up: null, //callback for up event
down: null, //callback for down event
left: null, //callback for left event
right: null, //callback for right event

//Below, internal values tweaked for best support for all wheel types, tweak to your preference if you don't like default values
quietPeriodBetweenTwoScrollEvents: 400, // Increases responsiveness, minimum delay between two quiet periods (no scroll events) to force the transition event if the transitionDuration is not completed.