web-dev-qa-db-fra.com

jquery vertical mousewheel lisse défilement

Je crée un site Web de parallaxe et je voudrais rendre la page plus fluide avec la molette pour une meilleure expérience utilisateur. Le meilleur exemple que j'ai pu obtenir était ce site Web: http://www.milwaukeepolicenews.com/#menu=home-page Ce serait formidable si je pouvais obtenir quelque chose de similaire dans mon site Web, le défilement vertical en douceur et inertie du défilement.

J'ai remarqué qu'ils utilisent la souris jQuery de Brandon Aaron qui est très légère mais je suis juste un débutant et je ne peux pas le faire fonctionner par moi-même.

J'ai également remarqué cela dans leur mpd-parallax.js:

jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){
        if(delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if(delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })

Merci!

[~ # ~] modifier [~ # ~]

Je suis presque là. Jetez un œil à ce violon: http://jsfiddle.net/gmelcul/cZuym/ Il suffit d'ajouter une méthode d'accélération pour faire défiler, tout comme le site Web de la police de Milwaukee.

jquerymousewheelsmooth-scrollinginertiaparallax.js
30
gigi melcul

Je sais que c'est un très vieux post, mais voici une bonne solution que j'ai faite:

function handle(delta) {
    var animationInterval = 20; //lower is faster
  var scrollSpeed = 20; //lower is faster

    if (end == null) {
    end = $(window).scrollTop();
  }
  end -= 20 * delta;
  goUp = delta > 0;

  if (interval == null) {
    interval = setInterval(function () {
      var scrollTop = $(window).scrollTop();
      var step = Math.round((end - scrollTop) / scrollSpeed);
      if (scrollTop <= 0 || 
          scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
          goUp && step > -1 || 
          !goUp && step < 1 ) {
        clearInterval(interval);
        interval = null;
        end = null;
      }
      $(window).scrollTop(scrollTop + step );
    }, animationInterval);
  }
}

Testez-le: http://jsfiddle.net/y4swj2ts/3/

18
user5863872

Voici deux jsfiddles - un avec le script et un sans celui-ci pour que vous puissiez comparer:

JavaScript en utilisant le plugin jQuery mousewheel :

$(document).ready(function() {
    var page = $('#content');  // set to the main content of the page   
    $(window).mousewheel(function(event, delta, deltaX, deltaY){
        if (delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if (delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })
});

Comparez les deux. D'après ce que je peux dire, le script ralentit la molette de la souris, il faut donc tourner plus physiquement pour faire défiler la même distance que sans le script. Il peut sembler plus fluide à cause de ce défilement plus lent (et il peut en effet être plus fluide car il est probablement plus facile sur l'unité graphique).

10
Cymen

Découvrez skrollr . C'est un plugin pour créer l'effet de parallaxe. Il a des options lorsque vous initialisez le plugin pour basculer le défilement en douceur:

var s = skrollr.init({
    smoothScrolling: true,
    smoothScrollingDuration: 1800
});
4
atomicrabbit

hé j'ai une autre ressource ici qui est vraiment simple à utiliser smoothwheel

Il permet une animation de défilement fluide sur la molette de la souris sur tous les appareils et fonctionne parfaitement!

4
GBM

J'ai trouvé ce plugin, il a de belles options et fonctionne sur tous les principaux appareils http://areaaperta.com/nicescroll/

3
iacobalin