Das Element vom Ziehen des Bildschirms auf dem Mobilgerät abweisen

Question

Ich habe ein Element, das hoch/runter gezogen werden kann. Wenn sich der Benutzer oben auf der Seite befindet, wird das Element (div) nicht mehr gezogen, wenn es 50px von oben erreicht (dasselbe gilt für den unteren Rand, wenn der Benutzer den ganzen Weg nach unten scrollt).

Das Problem: Wenn der Benutzer nach unten scrollt die Seite nur ein wenig dann die div kann aus Sicht gezogen werden. Ich möchte, dass es aufhört, bevor es von oben und von unten verschwindet. Bild Handy-Bildschirm, können Sie eine kleine Box auf der rechten Seite des Bildschirms nach oben/unten ziehen, kann aber nicht aus der Sicht ziehen, auch wenn Sie auf der Seite nach oben/unten scrollen.

Ich weiß, ich muss herausfinden, ob die Seite gescrollt ist, dann subtrahiere das von der Dokumentenhöhe, etc, etc ... (oder so ähnlich). Oder vielleicht gibt es eine bessere Lösung, von der ich nichts weiß. Hier

ist, was ich habe, so weit, dass die div ziehbar entlang der y-Achse macht:

this.makeDraggable = function(){ 
     var docHeight = $(document).height(); 
     var winHeight = $(window).height(); 

     if(eventSupported('touchstart')){ 
      el.addEventListener("touchmove", handleMove, false); 
     } 

     function handleMove(e) { 
      e.preventDefault(); 
      var y = e.changedTouches[0].pageY; 
      var bottom = winHeight - y; 

      if(bottom > 50 && y > 50) 
      $el.offset({ 
       top: y 
      }); 
     } 
    } 

Answer 1

die Lösung gefunden:

this.makeDraggable = function(){ 
     var docHeight = $(document).height(); 
     var winHeight = $(window).height(); 

     if(eventSupported('touchstart')){ 
      el.addEventListener("touchmove", handleMove, false); 
     } 

     function handleMove(e) { 
      e.preventDefault(); 

      var winScroll = $(window).scrollTop(); // scrolled away from top 
      var y = e.changedTouches[0].pageY; 
      var top = winScroll + 50; 
      var bottom = winScroll + winHeight - 50; 

      if(bottom > y && y > top) 
      $el.offset({ 
       top: y 
      }); 
     } 
    } 

$ (Fenster) .scrollTop() + $ (window) .height() wird immer die Unterseite des "Fensters" sein.