Snap Scroll ?

[stobi_de]

Hat mal jemand das Snap-Scroll in letzter Zeit getestet, was da mit Mobis Softscroll von anno dazumal kollidierte?

Frank

[Tommy Herrmann]

Moin,

da hat sich nichts geändert, denn die CSS-Eigenschaft "scroll-snap-type" funktioniert nicht im Zusammenhang mit der JavaScript Datei "smooth-scroll.js" von Mobirise, die man ja nicht deaktivieren kann.

Hier habe ich diese Datei händisch entfernt:

https://www.mobirise-tutorials.com/Test ... ction.html

Da wird sich auch nichts ändern, denn Mobirise wird da garantiert nichts an der JS-Datei ändern, nur damit 2 Leute (Du und ich) Snap-Scroll verwenden können

... ich hatte das ja auch erst im Dezember 2023 hier gemeldet:

https://forums.mobirise.com/discussion/ ... scripts/p1

[stobi_de]

Snap scroll scheint nun zu gehen.
Ist aber doch ein recht unbrauchbares Konstrukt.
Ist der Inhalt einer Section hoher als der Bildschirm, sieht man diesen nie.
Eine Section, die nicht "gesnappt" ist, kann nicht angezeigt werden.
Die Scrollgeschwindigkeit ist viel zu schnell.
Ich habe da auch nichts zur Steuerung gefunden.

[Tommy Herrmann]

Moin,

was hast Du denn genau nochmals geprüft? Ich hatte das damals doch extra hier gemacht:

https://www.mobirise-tutorials.com/Test ... ction.html

und feststellen müssen, dass die Datei "smooth-scroll.js"

Code: Alles auswählen

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

das verhindert. Ich habe diese aus meiner Beispielseite händisch entfernt. Das geht doch auch immer noch nicht - oder doch?

In der Zwischenzeit hat sich doch überhaupt nichts geändert, die Datei ist doch immer noch gleich, wie der Vergleich zeigt:

Das Verhalten vom Snap-Scroll geht bei mir auch, wenn die Section höher als der Bildschirm ist, wie diese "Tutorial-Section" hier - zumindest an meinem Laptop (sonst nimm mal das Handy):

https://www.mobirise-tutorials.com/Test ... l#Tutorial

Dann muss man am Scrollrad der Maus drehen oder eben den Scrollbalken mit der Maus "festhalten". Das ist so auch richtig und korrekt so.

Auch die Scrollgeschwindigkeit und das Verhalten sind exakt gleich mit diesem Beispiel von "Mozilla.org":

https://developer.mozilla.org/en-US/doc ... -snap-type

... oder z.B. auch "w3schools.com":

https://www.w3schools.com/cssref/tryit. ... -type_both

https://www.w3schools.com/cssref/css_pr ... p-type.php

[Tommy Herrmann]

Habe es eben probiert - das geht jetzt tatsächlich mit der Datei "smooth-scroll.js" - warum

Das hatte ja ohnehin nur die Browser "Chrome" und "Edge" betroffen - im "Firefox" ging es ja immer schon ...

Dann schreibe ich mein Tutorial mal um ...

[stobi_de]

In der Steuerberaterseite (ComplexM5) scheint eine andere Version zu sein.
Ich habe sie jetzt nicht genau verglichen, aber da haben wir einen Kommentarblock am Anfang der JS-Datei.
Sonderbarerweise ist in www.smoothscroll.net die Version 1.24 die neuste

Müssen wir das verstehen?

//
// SmoothScroll for websites v1.4.10 (Balazs Galambosi)
// http://www.smoothscroll.net/
//
// Licensed under the terms of the MIT license.
//
// You may use it in your theme if you credit me.
// It is also free to use on any individual website.
//
// Exception:
// The only restriction is to not publish any
// extension for browsers or native application
// without getting a written permission first.
//

[Tommy Herrmann]

... hmm - ich habe das jetzt zurückgebaut und es geht zwar offline im Edge und im Chrome aber nicht online

Es hat sich also überhaupt nichts verändert - kann ja auch nicht. Bei mir ist die Datei immer noch gleich.

Baue es nun wieder zurück wie es war - also mit händisch entfernter Datei "smooth-scroll.js" ...

Ich verstehe diese JavaScript-Datei ohnehin überhaupt nicht. Mobirise sollte die rauswerfen, das geht doch heute mit einer einfachen CSS-Anweisung ebenso gut

Code: Alles auswählen

scroll-behavior: smooth;

[Klaus]

Ich habs jetzt nicht ausprobiert aber ggf. kann man das "Problem" damit lösen:
https://github.com/gblazex/smoothscroll ... sites/wiki

To disable on a certain site call destroy as early as possible:
SmoothScroll.destroy()


Bzgl. Versionen ... ja MR verwendet die 1.4.9 und die 1.4.10 und teilw. unterscheiden die sich minimal in der Größe.
(Hab ich aber auch nicht weiter "untersucht".)

Bzgl:

Die Scrollgeschwindigkeit ist viel zu schnell.
Ich habe da auch nichts zur Steuerung gefunden.

Meinst Du das, steht auch auf der Wiki Seite?
You set options by passing your custom options in an object:
SmoothScroll({ stepSize: 20 })



... und noch n Tipp bzgl. vergleichen oder ansehen der "verkleinerten" JS Dateien:
Einfach den Inhalt bei z.B. https://beautifier.io reinkopieren und wieder einigermaßen lesbar machen.
(So was gibt es auch für z.B. VS Code als Plugin.)

[Tommy Herrmann]

Hallo Klaus,

mein Problem ist (leider) oft bei Deinen Kommentaren, dass ich nicht professionell genug bin, um diese zu verstehen

To disable on a certain site call destroy as early as possible:
SmoothScroll.destroy()

Hast Du das mal probiert - das wäre eine Hilfe, um das abzuschalten. Wie - ganz genau - macht man das dann?

Das aufzurufen heißt doch wieder ein neues JavaScript, wahrscheinlich ganz oben im <header>, und wie muss das dann aussehen?

Dies ist die aktuelle Datei "smooth-scroll.js", die Mobirise verwendet und um (nur) die geht es:

https://www.mobirise-tutorials.com/Test ... -scroll.js

[Klaus]

Einfach vor dem </body> bzw. nachdem das Skript geladen wurde.

Code: Alles auswählen

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

Mit dem stepSize hab ich das Probiert und das klappt ... bei dem von Dir mit dem Einbau von dem Snap das war mir zu Aufwendig ...

Das SmoothScroll klappt übrigens nur im Edge (vermutlich dann auch Chrome ... den hab ich aber auf dem System nicht drauf) nicht im Firefox ... vielleicht auch der Grund warum "Dein Snap" auch im Firefox geht!?

[Tommy Herrmann]

Danke Dir - so einfach

Ich teste das gleich mal ...

[Tommy Herrmann]

... geht (natürlich) - Wahnsinn - I'll be damned

Getestet: Android, Chrome, Edge, Firefox und deren mobilen Versionen ...

Du bist einfach nur the Hammer

https://www.mobirise-tutorials.com/Test ... ction.html

Ich werde morgen mein Tutorial neu schreiben.

Dennoch sollte Mobirise eine solche Option bereitstellen

[stobi_de]

Geht das mit allen Javcascripts?
Das wäre ja sowas von genial....

[Klaus]

Ne das klappt nur bei dem Skript weil es extra eingebaut wurde.
Ist auch nicht die "Traumlösung" weil das Skript ja geladen wird und dann nur die EventListener entfernt werden.

Code: Alles auswählen

    y.destroy = function() {
        z &&
            z.disconnect();
        window.removeEventListener(L, R, !1);
        window.removeEventListener("mousedown", U, !1);
        window.removeEventListener("keydown", M, !1);
        window.removeEventListener("resize", w, !1);
        window.removeEventListener("load", C, !1)
    };

... vermutlich der Grund warum Snap im Firefox auch so geht und Smooth nicht (letzte Zeile):

Code: Alles auswählen

var userAgent = window.navigator.userAgent;
var isEdge    = /Edge/.test(userAgent); // thank you MS
var isChrome  = /chrome/i.test(userAgent) && !isEdge; 
var isSafari  = /safari/i.test(userAgent) && !isEdge; 
var isMobile  = /mobile/i.test(userAgent);
var isIEWin7  = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);
var isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));
var isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;