Aidez-moi à comprendre le défilement en javascript (jquery)

Lorsque vous faites défiler, changez-vous la position de quelque chose?Aidez-moi à comprendre le défilement en javascript (jquery)

Comment changer la position du parchemin? Spécifiquement pour correspondre au mouvement des curseurs. Ce que je veux faire est de faire défiler la fenêtre quand je clique et fais glisser avec le curseur à l'intérieur de la fenêtre.

Par exemple: J'ai un div de 400px par 400px avec un div de 900px par 900px à l'intérieur. Je veux faire défiler en cliquant et en faisant glisser. Remarque, je ne veux pas déplacer la position de la div interne (facilement réalisable avec jQuery UI via draggable), juste la position de défilement. Déplacer la position réelle div divise avec mes autres applications JavaScript.

Toute aide serait appréciée! Merci!

Source

2010-10-26 Dave

Cela devrait vous aider à faire défiler horizontalement. Vertical serait similaire, mais avec scrollTop().

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      var lastPageX; 

      $(document).ready(function() { 
       $("#inner").mousedown(function(e) { 
        // Reference to the drag pad 
        var inner = $(this); 
        // Position where mouse was pressed 
        lastPageX = e.pageX; 
        // Attach mouse move listener 
        $(inner).mousemove(function(e) { 
         var diff = lastPageX - e.pageX; 
         // Scroll based on the new curson position 
         $("#outer").scrollLeft($("#outer").scrollLeft() + diff); 
         lastPageX = e.pageX; 
        }); 
        // Remove mouse move listener 
        $(window).mouseup(function() { 
         $(inner).unbind("mousemove"); 
        }); 
        return false; 
       }); 
      }); 
     </script> 
     <style> 
      #outer { 
       height: 400px; 
       width: 400px; 
       background-color: Lime; 
       overflow: scroll; 
      } 
      #inner { 
       height: 900px; 
       width: 900px; 
       background-color: Yellow; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="outer"> 
      <div id="inner"> 
      </div> 
     </div> 
    </body> 
</html>

Edit: return false après la mousedown est manipulé pour empêcher Firefox de saisir la div.

Source

2010-10-26 20:03:21

[démo jsfiddle] (http://jsfiddle.net/8yL7Y/) :) –

Aidez-moi à comprendre le défilement en javascript (jquery)

Répondre

Questions connexes