Scrollverhalten

[Mario]

Hallo Tüftler,

Ich suche ein "Javascript" oder "Jquery" mit dem man für einen bestimmten Scrollbereich langsam scrollt oder das scrollen pausiert. Zum Beispiel 2 bis 300 Pixel.

Das ganze sollte sich so verhalten:

• Der 1. Pixel wird normal gescrollt.
  
• Wird weiter gescrollt (im Beispiel: 2 bis 300 Pixel) wird langsam oder gar nicht gescrollt.
  
• Ab 301 Pixel wird normal weiter gescrollt.
  
• Noch besser wäre wenn man anstatt Pixel den Wert VH verwenden könnte.
  

Das ganze möchte ich hierfür verwenden: LINK

So sieht der Code jetzt aus:

Code:

<style>
.wzphdov_outer {
  position: relative;
  width: 100%;
  background-image: url("https://www.zella.de/media/images/probstei-zella-1920x800.jpg");
  background-color: #cccccc;
  height: calc(100vh);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wzphdov_image {
  display: block;
  width: 100%;
  height: auto;
}
 
.wzphdov_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .8s ease;
  background-color: rgba(0,0,0,0.5);
    opacity: 1;
}

.wzphdov_text {
  color: white;
  font-size: 42px;
  font-weight: 900;
  position: absolute;
  top: 80%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  transition: .8s ease;
}
</style>


<div class="wzphdov_outer">
    <div class="wzphdov_overlay"></div>
    <div class="wzphdov_text">HALLO Freunde</div>
</div>


<script>
jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
/*CSS ab Scrollposition 1 Pixel*/
        if(jQuery(this).scrollTop()>=1) {
        jQuery('.wzphdov_overlay').attr('style','height:0;');
            jQuery('.wzphdov_text').attr('style','top:40%;');
    } 
/*CSS wen wieder nach oben gescrollt*/
        else if (jQuery(this).scrollTop()<1) {
        jQuery('.wzphdov_overlay').attr('style','height:100%;');
            jQuery('.wzphdov_text').attr('style','top:80%;');
        }
    })
})
</script>

[admin]

Verstehe ich das richtig , dass du auf einer Webseite bestimmte Bereiche von alleine scrollen lassen willst?

Also ich scrolle z. B. mit der Maus und wenn ich bei px 300 ankomme scrollt die Seite von alleine nach px 600 Scrollen .
Dann auf höheren und wenn ich weiter scrolle zb zu 900px , dann scrollt die Seite wieder weiter bis 1200px oder so .

Habe ich das so etwa richtig verstanden?

[Mario]

Nein, nicht von alleine scrollen, sondern im Gegenteil das scrollen soll pausieren.

Sollte so aussehen:

• Ich scrolle mit der Maus (oder auf Touch-Gerät dem Finger) 1px.
  
• An dieser Stelle pausiert das scrollen, obwohl ich mit der Maus weiterscrolle.
  
• Wenn ich mit der Maus zB. bei 500px (noch besser 100vh) angekommen bin scrollt die Seite weiter wenn ich mit der Maus scrolle.
  

Also anders gesagt, ich scrolle mit der Maus, ab einem bestimmen Punkt pausiert das scrollen der Seite obwohl ich mit der Maus weiterscrolle. Ab einem weiteren Punkt scrollt die Seite ganz normal weiter wenn ich mit der Maus scrolle. Das wieder einsetzten des scrollens sollte an dem Punkt passieren wo das scrollen gestoppt wurde damit die Seite nicht springt.

[admin]

Das finde ich alles etwas kompliziert.
Hast du das schon mal irgendwo im netzt gesehen , wo man mal kucken kann?

Wenn ich jetzt scrolle bis zu einem Container der z. B. bei 1000px ist , soll das scrollen eingefroren sein obwohl ich mit der Maus der scrolle .

Ist die Maus zb bei 2000px angekommen soll das eingefrohrene scrollen weiter gehen , aber nicht bei 2000px weiter machen ( weil sonst würde er ja springen ) , sondern bei 1000px weiter scrollen.

So gesehen hat die Maus schon 2000px gescrollt , obwohl der body noch bei 1000px steht.

[Mario]

Hintergrund ist folgender. Ein Bekannter möchte einen Header wie auf dieser Seite allerdings keine komplette "Scroll-Snap Seite" sondern es geht ihm lediglich um den Header. Also habe ich das nach meinen Möglichkeiten nachgebaut LINK (Code im ersten Post). Das Problem dabei ist das man eben einen Pixel scrollen muss bis das Overlay auf Null gesetzt ist. Dabei wird am Scrollrad auch mal so viel gedreht das der Header schon fast weg gescrollt ist.

Aber du hast vermutlich recht. Da ich ja nicht weiß wie weit beim ersten mal gescrollt wird ist das wohl der falsche Weg. 
Da ist wohl "Scroll-Snap" doch der Weg. Da habe ich aber leider auch noch keine Erfahrungen.
Oder eventuell eine kurze Wartezeit bis bis das Overlay auf Null gesetzt wird.

[rzscout]

Hintergrund ist folgender. Ein Bekannter möchte einen Header wie auf dieser Seite allerdings keine komplette "Scroll-Snap Seite" sondern es geht ihm lediglich um den Header. Also habe ich das nach meinen Möglichkeiten nachgebaut LINK (Code im ersten Post). Das Problem dabei ist das man eben einen Pixel scrollen muss bis das Overlay auf Null gesetzt ist. Dabei wird am Scrollrad auch mal so viel gedreht das der Header schon fast weg gescrollt ist.

Aber du hast vermutlich recht. Da ich ja nicht weiß wie weit beim ersten mal gescrollt wird ist das wohl der falsche Weg. 
Da ist wohl "Scroll-Snap" doch der Weg. Da habe ich aber leider auch noch keine Erfahrungen.
Oder eventuell eine kurze Wartezeit bis bis das Overlay auf Null gesetzt wird.

Hi Mario,
ich würde da immer aufpassen. Das Problem liegt hier dass das Scrollverhalten bei Browsern unterschiedlich ist. Das hat nix mit nichteinhaltung von Webstandards zu  tun, sondern bestimmte Features die ein Browser zusätzlich den Besucherinnen und Besucher geben möchte. Mit CSS kann man bestimmte Scroll-Eigenschaften beeinflussen und das Browser-übergreifend.

Der Trick hier mit dem Scrollen ist, das hier Schattenelemente gescrollt werden. Diese kann man mithilfe von CSS sogar ansprechen und so Sachen anmiert ein- oder ausblenden.