Mobirise Tutorials

Section Snap Scroll

Scrolle mit der Maus nach unten - es wird von einer Section nur nächsten eingeschnappt

Section 1 Section 1a Tutorial Translate

Section Scroll

CSS Eigenschaft scroll-snap-type.

Durch einen Fehler der Datei "smooth-scroll.js" funktioniert "scroll-snap-type" nicht korrekt in den Desktop-Browsern Chrome und Edge, im Firefox-Browser dagegen schon.

Der Fehler liegt in dieser JavaScript-Datei, die Mobirise verwendet:

<script src="assets/smoothscroll/smooth-scroll.js"></script>

Es gibt bei dieser Datei die Möglichkeit sie direkt nach dem Aufruf wieder zu deaktivieren, wie hier beschrieben. Das habe ich getestet und es geht auch. Eigentlich der bequemere Weg, ich verstehe aber die Funktion nicht richtig und verwende das hier auf dieser Seite nicht.

Wollt ihr das einbauen, dann gehört das Script in die Seiteneinstellungen in den Bereich "End of <body> code":

<script>
  SmoothScroll.destroy()
</script>



Ich habe die JS-Datei "smooth-scroll.js" hier jedoch händisch deaktiviert und so geht es dann auch im Chrome und Edge am Desktop. Mit Mobirise selbst publiziere ich eine "Fakeseite", die ich unmittelbar zu meiner geänderten Seite "Section.html" umleite:

<meta http-equiv="Refresh" content="0; url='https://www.mobirise-tutorials.com/Test-Temp/Section.html'" />

Mit dem "Touchpad" am Laptop und über die Richtungspfeile ▼▲ funktioniert es ebenfalls.

Auch am Smartphone funktioniert CSS-Snap-Scroll einwandfrei.

Hier ist meine CSS, die als Style-Anweisung in den Bereich "Inside <head> code" gehört.

Die class="mysection" habe ich dann in allen relevanten Blöcke an das <section> Tag geschrieben.

<style>
html, body, section {
  block-size: auto;
}
html {
  scroll-snap-type: y mandatory;
}
.mysection {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
</style>

Section 1

Section 2

Section 3

Nach oben

Section 1a

Im gleichen Block - Höhe 500px

Die vier Header-Blöcke mit den Bildern sowie das Tutorial stehen auf 100% Block-Höhe, was die normale Einstellung ist. Diese farbigen Flächen mit dem Text haben eine individuelle  Pixel-Höhe, weil diese innerhalb des gleichen Blocks platziert wurden. 

Section 2a

Im gleichen Block - Höhe 600px

Die vier Header-Blöcke mit den Bildern sowie das Tutorial stehen auf 100% Block-Höhe, was die normale Einstellung ist. Diese farbigen Flächen mit dem Text haben eine individuelle Pixel-Höhe, weil diese innerhalb des gleichen Blocks platziert wurden.

Section 3a

Im gleichen Block - Höhe 800px

Die vier Header-Blöcke mit den Bildern sowie das Tutorial stehen auf 100% Block-Höhe, was die normale Einstellung ist. Diese farbigen Flächen mit dem Text haben eine individuelle Pixel-Höhe, weil diese innerhalb des gleichen Blocks platziert wurden.

Diesen Block mit den farbigen Flächen habe ich lediglich als zusätzlichen Test erstellt, um zu sehen wie man die Höhen von Bereichen in einem einzigen Block bestimmen kann.

Logo Mobirise Tutorials

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren