Scrollen divs "links und rechts" und "auf und ab" mit jQuery

Question

Ich arbeite an www.alwaystwisted.com. Die Seite hat 4 divs, die über die Hauptlinks nach unten oder oben blättern, je nachdem, auf welchem ​​div du bist.

Ich brauche das innerhalb des Div zu arbeiten, aber links oder rechts, je nachdem, auf welchem ​​Div du bist. Ich kann es nicht verarbeiten und es brät mein Gehirn.

<script type="text/javascript"> 
$(document).ready(function() { 
    function filterPath(string) { 
    return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 
    $('a[href*=#]').each(function() { 
     if ((filterPath(location.pathname) == filterPath(this.pathname)) 
     && (location.hostname == this.hostname) 
     && (this.hash.replace(/#/,''))) { 
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); 
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; 
      if ($target) { 
      var divOffset = $target.parent().offset().top; 
      var pOffset = $target.offset().top; 
      var pScroll = pOffset - divOffset; 
      $(this).click(function() { 
       $target.parent().animate({scrollTop: pScroll + 'px'}, 600); 
       return false; 
      }); 
      } 
     } 
    }); 
}); 
</script> 

Ich freue mich auf eine hilfreiche Antwort. Danke im Voraus, Stu.

Answer 1

Hinweis: Ich habe Ihren Code nicht auf Genauigkeit getestet, noch habe ich überprüft, ob meine Änderungen funktionieren würden. Ich nahm einfach den Code, den Sie hatten, und geändert „oben“ nach „links“ und hoffte, im Grunde für den besten :)

Nach einiger Neuformatierung des Codes zu tun:

$(document).ready(function() { 
    function filterPath(string) 
    { 
     return string.replace(/^\//,'') 
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
      .replace(/\/$/,''); 
    } 
    $('a[href*=#]').each(function() { 
     if ((filterPath(location.pathname) == filterPath(this.pathname)) 
      && (location.hostname == this.hostname) 
      && (this.hash.replace(/#/,''))) 
      { 
       var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); 
       var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; 
       if ($target) 
       { 
        var divOffset = $target.parent().offset().top; 
        var pOffset = $target.offset().top; 
        var pScroll = pOffset - divOffset; 
        $(this).click(function() 
        { 
         $target.parent().animate({scrollTop: pScroll + 'px'}, 600); 
         return false; 
        }); 
       } 
      } 
    }); 
}); 

Ich denke, dass ja, in der Tat könnte man wahrscheinlich diesen Code wiederverwenden die divs bewegen links und rechts durch Modifizieren der Linien zu machen:

var divOffset = $target.parent().offset().top; 
var pOffset = $target.offset().top; 
$target.parent().animate({scrollTop: pScroll + 'px'}, 600); 

um so etwas wie:

var divOffset = $target.parent().offset().left; 
var pOffset = $target.offset().left; 
$target.parent().animate({scrollLeft: pScroll + 'px'}, 600); 

Ich kreuze meine Finger auf diesem;)

Answer 2

sollten Sie Ihre 4 Menüinhalte in einem < ul setzen> jedes in einem < li>. Legen Sie genaue Breite und Höhe für sie und Überlauf: versteckt, und ein Schwimmer links auf der < li> s. Auf diese Weise befinden sie sich in einer Linie mit Ihrem Container als Ansichtsfenster. In jQuery sollten Sie die < ul's marginLeft Eigenschaft

animieren