Überprüfen Sie, ob ein Element vollständig sichtbar ist und stoppen Sie dann das Scrollen
Ich benutze FullSlider.js , um eine Webseite mit vollständiger Folie zu erstellen. Wenn das rote Element vollständig sichtbar ist, muss der Browser das Scroll-Ereignis blockieren (bedeutet: Fenster bewegt sich nicht, aber ich kann die Aktion empfangen) und nachdem ich einige Sachen gemacht habe, möchte ich das Scrollen wieder aktivieren.
Das habe ich bisher gemacht:
Ich habe viel darüber gelesen und noch mehr Lösungen versucht wie: Hör auf zu scrollen: 1. das Scrollen der Webseite mit jquery stoppen funktioniert überhaupt nicht
-
Programmseiten-Scrollen mit jQuery stoppt das Scrollen, aber es ist nicht möglich, das Scrollen erneut zu aktivieren
-
Ereignis verhindern Standard, funktioniert gut in Chrom, aber weniger gut in Firefox
Überprüfen Sie, ob das Element sichtbar ist:
Überprüfen Sie, ob das Element nach dem Scrollen sichtbar ist
Ich habe die obige Lösung verwendet und versucht:
- um zu überprüfen, ob das rote Element sichtbar ist (nicht funktioniert)
- hat geprüft, ob ein kleiner Bereich über dem roten Element sichtbar ist (funktioniert nicht gut)
- hat überprüft, ob eine kleine Spanne unterhalb des roten Elements sichtbar ist (funktioniert nicht gut)
-
überprüft, ob eine kleine Spannweite über und unter dem Element sichtbar ist (hat überhaupt nicht funktioniert)
-
hat versucht, den scrollTop des roten Elements zu testen und zu prüfen, ob der bodys scrollTop gleich oder nahe ist
Tatsächlich funktionierte die 2. Lösung sehr gut, aber ich war einfach nicht in der Lage, den Offset herauszufinden, den ich brauchte, um die "feste Kopfzeilennavigation" zu kompensieren.
Momentan benutze ich das "isScrolledIntoView", um zu erkennen, ob die Position passt (funktioniert gut auf großen Bildschirmen, funktioniert überhaupt nicht auf kleinen Bildschirmen). Für das Stop-Scrollen verwende ich den folgenden Hack:
CSS: .scrollHack {Position: statisch; Überlauf versteckt; }
JS:
%Vor%War jemand mit einer vertrauten Situation konfrontiert und hat einige Skripte oder Hacks, die mir helfen könnten?
1 Antwort
Entschuldigung, ich kann noch nicht in einem Kommentar antworten. Dies ist also nur eine Teilantwort, bezogen auf den zweiten Teil Ihrer Frage.
Um zu überprüfen, ob Ihr Element vollständig sichtbar ist:
-
Verwenden Sie jQuery innerHeight () anstelle von
height(). Dies gibt Ihnen die Elementhöhe ohne Ränder und Ränder. -
Es sollte nicht notwendig sein, nach einem kleinen Bereich über dem roten Element zu suchen. Wäre das nicht gleichbedeutend damit, nur zu prüfen, ob die Oberseite des roten Elements auf dem Bildschirm ist? Du könntest das so machen:
%Vor%Aber das prüft nur, ob der obere Teil Ihres Elements sichtbar ist!
- Sie sagen, dass Ihre aktuelle Lösung auf kleinen Bildschirmen nicht gut funktioniert. Könnte es sein, dass das zu überprüfende Element auf kleinen Bildschirmen größer ist als das Ansichtsfenster?
Vielleicht hilft das ein bisschen. Sonst wäre es wirklich gut, eine Beispielseite oder ein Beispiel zu sehen.
Tags und Links javascript jquery scroll