Reputation: 4388
I have a page with four main divs stacked vertically one by one . I need on scroll it should move between the divs directly not the normal scroll.
I am using ScrollTo plugin function for this but it is not working properly as i have to do all the operation on scroll but in the plugin example it is using buttons.
Anyone having any idea how i can do this?
I want a behaviour similar to this page.
enter
Upvotes: 1
Views: 178
Reputation: 1816
The website you linked to as your example appears to be using the fullPage.js jQuery plugin. Which is what I'd guess you'd be after.
Edit:
To get this working without any plugins maybe try something like this
var divs = ["first","second","third","fourth"];
var counter = 0;
document.addEventListener("mousewheel", function(e) {
if(e.wheelDelta > 0){ // up
if(counter > 0){
counter--;
document.getElementById(divs[counter+1]).style.display = "none";
document.getElementById(divs[counter]).style.display = "block";
}
}
else if(e.wheelDelta < 0){ // down
if(counter < (divs.length-1)){
counter++;
document.getElementById(divs[counter-1]).style.display = "none";
document.getElementById(divs[counter]).style.display = "block";
}
}
});
Demo: http://jsfiddle.net/jLG7W/1/
Upvotes: 4
Reputation: 1058
If you want trigger scroll function when you actually scroll the mouse wheel, not only use keyboard arrows, then you should try reading this.
I made simple demo here in JSFiddle.
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
window.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else window.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// Replace this IF statement with your code
if(delta==-1){
// Go to next slide
}else{
// Go to previous slide
}
return false;
}
Upvotes: 0