So erstellen Sie einen scrollbaren div Scroll bei Klick und Mouseover mit jQuery

Question

Mit dem Markup unten, wie würde ich das "#content" Div nach oben oder unten scrollen, wenn ich mit der Maus oder "Mauszeiger über" #scrollUp "oder" #scrollDown "Anker-Tag. Scrollen sollte vorzugsweise glatt sein. Wenn sie angeklickt wird, sollte sie einen bestimmten Betrag scrollen (für Touch-Geräte), wenn der Mauszeiger darüber bewegt werden kann bis zum Mouse-Out.

<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

Sie jQuery verwenden können animate Funktion einen reibungslosen-Scrolling-Effekt auf click oder mouseover zu erreichen:

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); 
     } 
    }); 
} 

Arbeitsbeispiel: http://jsfiddle.net/andrewwhitaker/s5mgX/

(Du musst um die mouseover und mouseout Ereignisse zu deaktivieren, um die Auswirkungen des Ereignishandlers click ordnungsgemäß anzuzeigen)

Wie es funktioniert:

• die oben erwähnte animate Funktion verwendet um einen bestimmten Betrag auf Klick zu bewegen reibungslos.
• Verwendet ein Flag, um kontinuierliches Scrollen zu aktivieren, wenn der Ereignishandler mouseover aufgerufen wird, und das Scrollen beim Ereignishandler der Verbindung mouseout zu deaktivieren.
• Wenn scrollContent aufgerufen wird, wenn das scrolling Flag noch true ist, nachdem die Animation abgeschlossen ist, animieren Sie erneut in der gleichen Richtung. Der Rückruffunktionsparameter von animate ermöglicht es uns, eine Aktion auszuführen, nachdem die Animation abgeschlossen wurde.

Answer 2

Verwenden Sie JavaScript anstelle von jQuery für diese Aufgabe. Google die Funktion scrollBy() wie in window.scrollBy()