Jak korzystać z myszy z kółkiem do skoków do następnej lub poprzedniej sekcji # w html

Question

Mam witryny z górnym menu nawigacyjnym:

<nav id="menu"> 
    <ul id="menu-nav"> 
     <li class="current"><a href="#home-slider">Home</a></li> 
     <li><a href="#Cakes">Cakes</a></li> 
     <li><a href="#Candy">Candy</a></li> 
     <li><a href="#Marshmellow">Marshmellow</a></li> 
     <li><a href="#Honey">Honey</a></li> 
    </ul> 
</nav> 

i wszystkie moje sekcjach są:

<div id="Cakes" class="page"> 
    <div class="container"> 
     This is sweet 
    </div> 
</div> 

Jak mogę użyć kółka myszy, aby przejść bezpośrednio do następnej lub poprzedniej sekcji?

Obecnie kółko myszy przewija stronę w zwykły sposób. Ale chcę, aby przeskoczył do każdej sekcji przy jednym obrocie koła bez przewijania całej strony.

Answer 1

Musisz dodać wtyczkę, aby dodać wydarzenie koła myszy. Może spróbuj tego jednego this. ma całkiem dobre przykłady.

Answer 2

Bez wtyczek, wszystko co musisz zrobić, to uchwycić kółka myszy za pomocą mousewheel Event - na Firefox używamy DOMMouseScroll zamiast - i zależnie od wartości imprezy originalEvent.wheelDelta - ponownie Firefox jest originalEvent.detail, dzięki Firefox - jeśli ta wartość jest pozytywny następnie użytkownik jest przewijanie w górę, jeśli jest to ujemny następnie kierunek jest w dół.

JS Fiddle 1

jQuery ⁽⁾:

//initialize 
var winHeight = $(window).height(), 
    pages = $('.page'), 
    navLinks = $('#menu-nav a'), 
    currentPage = 0; 

$('html, body').animate({ scrollTop: 0}, 0); 

// listen to the mousewheel scroll  
$(window).on('mousewheel DOMMouseScroll', function(e){ 

    //by default set the direction to DOWN 
    var direction = 'down', 
    $th = $(this), 
    // depending on the currentPage value we determine the page offset 
    currentPageOffset = currentPage * winHeight; 

    // if the value of these properties of the even is positive then the direction is UP 
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { 
     direction = 'up'; 
    } 

    // if the direction is DOWN and the currentPage increasing won't exceed 
    // the number of PAGES divs, then we scroll downward and increase the value 
    // of currentPage for further calculations. 
    if(direction == 'down' && currentPage <= pages.length - 2){ 
     $th.scrollTop(currentPageOffset + winHeight); 
     currentPage++; 
    } else if(direction == 'up' && currentPage >= 0) { 
     // else scroll up and decrease the value of currentPage IF the direction 
     // is UP and we're not on the very first slide 
     $th.scrollTop(currentPageOffset - winHeight); 
     currentPage--; 
    } 
}); 

// as final step we need to update the value of currenPage upon the clicking of the 
// navbar links to insure having correct value of currentPage 
navLinks.each(function(index){ 
    $(this).on('click', function(){ 
    navLinks.parent().removeClass('current'); 
    $(this).parent().addClass('current'); 
    currentPage = index; 
    }); 
}); 

---

⁽⁾UPDATE

Jeśli nie chcesz używać jQuery, poniżej znajduje czysty javascript kod robi to samo co powyżej, to nie będzie działać w IE8 i choć poniżej:

JS Fiddle 2

Czysta Javascript:

//initialize 
var winHeight = window.innerHeight, 
    pages = document.getElementsByClassName('page'), 
    navLinks = document.querySelectorAll('#menu-nav a'), 
    currentPage = 0; 

window.addEventListener('mousewheel', function(e) { 
    scrollPages(e.wheelDelta); 
}); 
window.addEventListener('DOMMouseScroll', function(e) { 
    scrollPages(-1 * e.detail); 
}); 

function scrollPages(delta) { 
    var direction = (delta > 0) ? 'up' : 'down', 
    currentPageOffset = currentPage * winHeight; 

    if (direction == 'down' && currentPage <= pages.length - 2) { 
    window.scrollTo(0, currentPageOffset + winHeight); 
    currentPage++; 
    } else if (direction == 'up' && currentPage > 0) { 
    window.scrollTo(0, currentPageOffset - winHeight); 
    currentPage--; 
    } 
} 

for (var i = 0; i < navLinks.length; i++) { 
    navLinks[i].addEventListener('click', updateNav(i)); 
} 

function updateNav(i) { 
    return function() { 
    for (var j = 0; j < navLinks.length; j++) { 
     navLinks[j].parentNode.classList.remove('current'); 
    } 
    navLinks[i].parentNode.classList.add('current'); 
    currentPage = i; 
    } 
}