Scrollen um eine bestimmte Position beim Scroll-Event

[Trüffelkrieger]

Ich möchte etwas ähnliches machen wie dieses Skript: http://alvarotrigo.com/fullPage/#firstPage

Mit einem Unterschied: Es sollen nicht alle „Seiten“ Vollbild-groß sein. Ich möchte also zwischendurch beispielsweise zwei oder drei Texte schreiben, bei denen dann der darüber und darunter liegende Slide noch zu sehen ist.

Folgendes habe ich gebastelt beziehungsweise aus verschiedenen Quellen zusammengesucht:

$(function(){			
  var throttled = _.throttle(updatePosition, 600, {trailing: false});
  $(window).scroll(throttled);  
  
  var lastScrollTop = 0, delta = 5;
  var sectionNumber = 1;   
  var top = 0;     
  function updatePosition () {
    var st = $(this).scrollTop();
    
    if(Math.abs(lastScrollTop - st) <= delta)
      return;
    
    if (st > lastScrollTop){
      // downscroll code
      console.log('scroll down');
      //$('html, body').animate({scrollTop:$('.section').eq(sectionNumber).position().top}, 'slow');
      if ($('.section').eq(sectionNumber).hasClass('text')) {
        var textHeight = $('.section').eq(sectionNumber).height();
        var windowHeight = $(window).height();
        top = top + (windowHeight / 2) - textHeight;
      }
      if (!$('.section').eq(sectionNumber).hasClass('text')) {
        var windowHeight = $(window).height();
        top = top + windowHeight;
      }
      var transformString = "translate3d(0px, -"+top+"px, 0px)";
      $('body').css("transform", transformString);
      sectionNumber = sectionNumber +1;
    } else {
      // upscroll code
      console.log('scroll up');
    }
    lastScrollTop = st;
  };

So sieht der HTML-Part aus:

<section>
  <figure class="section"> <img src=""> </figure>
  <figure class="section"> <img src=""> </figure>
  <div class="section text">
    <p>Text</p>
  </div>
  <figure id="section" class="section"> <img src=""> </figure>
  <figure class="section"> <img src=""> </figure>
  <figure class="section"> <img src=""> </figure>
  <figure class="section"> <img src=""> </figure>
</section>

Kurze Erklärung: Damit nicht gleich zig Scroll-Events bei einem Maus-Scroll angefeuert werden, versuche ich es mit der throttle-Funktion von Underscore.js. Die Unterscheidung, ob es ein Scroll nach oben ist oder nach unten funktioniert problemlos.

Folgende Probleme habe ich:

Die throttle-Funktion scheint das erste Scroll-Event zu unterbinden. Ich muss also ein zweites Mal scrollen, bevor ein Scroll-Event abgegeben wird.

Als zweites scrollt die Seite dann bei jedem Scroll zu weit, da zu der berechneten Scrollweite dann noch die Strecke dazukommt, die das Mausrad sowieso „erzeugt“.
Kann ich irgendwie unterbinden, dass die Nutzung des Scrollrades eine Auswirkung auf die Verschiebung der Seite hat aber trotzdem ein Scroll-Event erzeugt?

Ich hoffe, das ganze war halbwegs verständlich ...

 

[bodo92]

Ich bin mir nicht sicher ob das auch geht, aber eigentlich solltest du mit JS das Scroll-Event mit preventDefault abbrechen können.

 

[Trüffelkrieger]

Nein, das hier bewirkt leider gar nichts:

  $(window).scroll(function(event){
  event.preventDefault();
  });

Ich hatte es bereits mit dem wheel-Event probiert. Das hat zwar das Scrollen unterbunden aber dadurch wurde auch kein Scroll-Event mehr ausgelöst ...

 

[Trüffelkrieger]

So, habe es hinbekommen:

So sieht zuerst mal meine Lösung aus:

$(function(){
  var mouseOver = false;
  $('body').bind('mousewheel', function(e){
    if(mouseOver){
      if(e.preventDefault) { e.preventDefault(); } 
      e.returnValue = false; 
      return false; 
    }
  });
  $('#fullpage').mouseenter(function(){ mouseOver=true; });
  $('#fullpage').mouseleave(function(){ mouseOver=false; });
  var sectionNumber = 1;   
  var top = 0;     
  $('#fullpage').bind('mousewheel', function(e){
    var windowHeight = $(window).height();
    if(e.deltaY < 0){
      if ( $('.section').eq(sectionNumber).length == 0 ) {
        return;
      }
      if ($('.section').eq(sectionNumber).hasClass('text')) {
        var textHeight = $('.section').eq(sectionNumber).outerHeight();
        top = top + (windowHeight / 2) + textHeight;
      }
      if (!$('.section').eq(sectionNumber).hasClass('text')) {
        if ($('.section').eq(sectionNumber-1).hasClass('text')) {
          var textHeight = $('.section').eq(sectionNumber-1).outerHeight();
          top = top + (windowHeight / 2);
        } else {
          top = top + windowHeight;
        }
      }
      var transformString = "translate3d(0px, -"+top+"px, 0px)";
      $('body').css("transform", transformString);
      sectionNumber = sectionNumber +1;
    } else {
      if ( sectionNumber == 1 ) {
        return;
      }
      if ($('.section').eq(sectionNumber-1).hasClass('text')) {
        var textHeight = $('.section').eq(sectionNumber-1).outerHeight();
        top = top - ( (windowHeight / 2) + textHeight);
      }
      if (!$('.section').eq(sectionNumber-1).hasClass('text')) {
        if ($('.section').eq(sectionNumber-2).hasClass('text')) {
          var textHeight = $('.section').eq(sectionNumber-1).outerHeight();
          top = top - (windowHeight / 2);
        } else {
          top = top - windowHeight;
        }
      }
      var transformString = "translate3d(0px, -"+top+"px, 0px)";
      $('body').css("transform", transformString);
      sectionNumber = sectionNumber -1;
    }
  });	
});

Zum Einsatz kommt jetzt neben jQuery noch das jQuery-Mousewheel-Plugin (https://github.com/jquery/jquery-mousewheel).