Comment faire défiler un div défilable avec click et mouseover en utilisant jQuery

Question

En utilisant le balisage ci-dessous, comment aurais-je le div "#content" pour faire défiler vers le haut ou le bas quand je clique ou passe la souris sur "#scrollUp" ou "#scrollDown" "tag d'ancrage. Le défilement devrait être lisse de préférence. Si vous cliquez dessus, vous devez faire défiler une quantité spécifique (pour les périphériques tactiles) si le survol de la souris peut défiler jusqu'au passage du curseur.

<style> 
     #content { 
     overflow:auto; 
     height: 50px; /*could be whatever*/ 
       } 
    </style> 

<a id="scrollUp" href="#">up</a> 
<a id="scrollDown" href="#">down</a> 

<div id="wrapper"> 
<div id="content"> 

    <ul> 
    <li>some content here</li> 
    <li>some content here</li> 
    <li>some content here</li> 
    <li>some content here</li> 
    <li>some content here</li> 
    <li>some content here</li> 
    </ul> 

</div> 
</div> 

Answer 1

Vous pouvez utiliser la fonction animate de jQuery pour obtenir un effet lisse défilement sur click ou mouseover:

var step = 25; 
var scrolling = false; 

// Wire up events for the 'scrollUp' link: 
$("#scrollUp").bind("click", function(event) { 
    event.preventDefault(); 
    // Animates the scrollTop property by the specified 
    // step. 
    $("#content").animate({ 
     scrollTop: "-=" + step + "px" 
    }); 
}).bind("mouseover", function(event) { 
    scrolling = true; 
    scrollContent("up"); 
}).bind("mouseout", function(event) { 
    // Cancel scrolling continuously: 
    scrolling = false; 
}); 


$("#scrollDown").bind("click", function(event) { 
    event.preventDefault(); 
    $("#content").animate({ 
     scrollTop: "+=" + step + "px" 
    }); 
}).bind("mouseover", function(event) { 
    scrolling = true; 
    scrollContent("down"); 
}).bind("mouseout", function(event) { 
    scrolling = false; 
}); 

function scrollContent(direction) { 
    var amount = (direction === "up" ? "-=1px" : "+=1px"); 
    $("#content").animate({ 
     scrollTop: amount 
    }, 1, function() { 
     if (scrolling) { 
      // If we want to keep scrolling, call the scrollContent function again: 
      scrollContent(direction); 
     } 
    }); 
} 

Exemple de travail: http://jsfiddle.net/andrewwhitaker/s5mgX/

(Vous aurez pour désactiver les événements mouseover et mouseout pour voir correctement les effets du gestionnaire d'événements click)

Comment ça marche:

• utilise la fonction animate mentionné ci-dessus pour faire défiler en douceur par une quantité spécifiée en cliquant dessus.
• Utilise un indicateur pour activer le défilement continu lorsque le gestionnaire d'événements mouseover du lien est appelé, et désactiver le défilement lorsque le gestionnaire d'événements mouseout du lien.
• Lorsque scrollContent est appelée, si le drapeau scrolling est toujours true après l'animation est terminée, animez à nouveau dans le même sens. Le paramètre de fonction de rappel de animate nous permet de prendre une action une fois l'animation terminée. `ScrollBy()` n'est disponible que dans la fenêtre.

Answer 2

Essayez d'utiliser JavaScript au lieu de jQuery pour cette tâche. Google la fonction scrollBy() comme dans window.scrollBy()