Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Software>Safari (macOS 10.14.6) Nachfedern beim Scrollen unterbinden?

Safari (macOS 10.14.6) Nachfedern beim Scrollen unterbinden?

jens-ulrich
jens-ulrich10.06.2014:46
Hallo zusammen
ich habe bemerkt, dass Safari beim Scrollen nach ganz oben/unten gerne "nachfedert". Kann man das in HTML/CSS abschalten?

Bei mir reist dieses Verhalten, das z.B. der Firefox nicht hat, kurzfristig Kopf und Inhalt einer Website auseinander, obwohl die Elemente genau aufeinander stehen.


Der css-Befehl
scroll-behavior: smooth | auto;
scheint nicht die Lösung zu sein.
0

Kommentare

Hakke10.06.2017:29
Das Nachfedern ist doch eine Funktion von macOS. Mit Tinkertool kann man das abschalten, aber eben nur auf dem eigenen Rechner.
0
albertyy10.06.2017:38
"nachfedern" ? !
hab´ich hier noch nie gehabt.
Was soll das sein ?
10.14.6 Safari 13.1.1
0
jens-ulrich
jens-ulrich10.06.2019:04
@albertyy
scroll mal eine website wie diese schnell nach oben und dann "schwingt" die Anzeige im Safari 13 unter macOS 10.14.6 nach.

@Hakke
in Firefox tritt dieses Problem nicht auf. Muss also auch mit der Basis von Safari zusammenhängen (webkit?)
-1
Kapeike
Kapeike10.06.2019:10
Hakke
Das Nachfedern ist doch eine Funktion von macOS. Mit Tinkertool kann man das abschalten, aber eben nur auf dem eigenen Rechner.

wobei TinkerTool allerdings anmerkt: "Nicht alle Programme beachten diese Einstellung." NB: Die Funktion findet man unter "Allgemein" und heißt "Gummibandeffekt abschalten". Vielleicht weiß albertyy dann eher, was gemeint ist
+2
jens-ulrich
jens-ulrich10.06.2019:23
Overscroll-behavior nennt man es in HTML/CSS, wie ich eben gefunden habe. Allerdings steht die Funktion Overscroll-behavior: none; nicht für Safari zur Verfügung.

-webkit-transform: translate3d(0,0,0); könnte helfen, klappt nur bei nicht, meine Test-Website wird dadurch komplett statisch.
0
albertyy11.06.2012:16
@ Jens Ulrich
hier hüpft und federt NIX
hat auch noch irgendwo bei mir bei irgendeiner anderen Webseite
Da hast Du wohl irgendwann einmal mit einem Sondertool irgendetwas eingestellt.
0
albertyy11.06.2012:20
@kapeike

Da benutz man irgendwelche unsinnigen Sondertools als gemeiner User und beschwert sich dann, wenn irgendetwas hüpft und springt .....
Das meinte ich
-3
jens-ulrich
jens-ulrich11.06.2013:11
Da hast Du wohl irgendwann einmal mit einem Sondertool irgendetwas eingestellt.
Da benutz man irgendwelche unsinnigen Sondertools als gemeiner User und beschwert sich dann, wenn irgendetwas hüpft und springt .....

Nein. Ich nutze einen Safari ohne Erweiterungen. Da ich jetzt den Fachbegriff "Overscroll-behavior" kenne, habe ich den folgenden Clip gefunden:

Da seht ihr genau was ich meine.

Schönen Feiertag, für die, die den heute haben.
J.
+1
Deichkind11.06.2013:41
Wie Hakke und Kapeike schon geschrieben haben: Der Gummibandeffekt ist ein Verhalten des Scrolllbereichs in Fenstern in macOS. Er tritt auch in Fenstern des Finders und der Apps auf (jedenfalls in Apples Apps).
Und in dem von dir um 13:11 zitierten Beispiel tritt er bei Chrome und bei Safari gleichermaßen auf. Unterschiedlich ist bei den Browsern allerdings jener Bereich des Fensters, der in das Scrollen einbezogen ist. Der Gummibandeffekt tritt ja am Rand des Scrollbereichs auf, nicht unbedingt am Rand des Fensters.
+1
Kapeike
Kapeike11.06.2013:48
@albertyy: der Effekt ist nicht durch das „Sondertool“ eingeführt, sondern er ist in mac OS drin. TinkerTools ist zum Glück in der Lage, den Effekt ABzustellen (allerdings mit der Einschränkung, dass nicht jedes Programm gleich darauf reagiert, wie ich oben schrieb)
0
chevron
chevron11.06.2013:52
Das Verhalten hat man übrigens nur mit einem Apple Trackpad oder der Apple Magic Mouse. Bei einer Maus mit klassischem Rad ist das deaktiviert.
+1
jens-ulrich
jens-ulrich11.06.2013:52
ok, dann schliessen wir den Fall mal. Solange Webkit keine CSS-Befehle zum Abschalten dieses (fragwürdigen) Effektes unterstützt, muss ich wohl damit leben. Zum Glück nutzt ja kaum jemand Safari zum Surfen.
0
jens-ulrich
jens-ulrich12.06.2016:34
Hurrah und Heureka! Ich habe die Lösung gefunden.

Wenn #kopf 50px hoch ist, dann muss man #inhalt fixieren mit
#inhalt {width: 100%; height: calc(100% - 150px); position: fixed; }
und damit das scrollen noch geht, muss
#inhalt-mitte {overflow-x: hidden; overflow-y: auto;}
sein.

Fall gelöst. Mal sehen, welche Webbrowser damit vor Schreck tot umfallen.

----
Das Gerippe des Quellcode (reduziert auf das Entscheidende) sieht so aus:

<html>
<head>
<title>Stehender Kopf </title>
<style>
* {margin: 0px; padding: 0px;} /* Alle Ränder & Abstände auf Null */
body {background: #006699;}
#block_innen, #kopf, #inhalt { max-width: 960px;}
#kopf-mitte, #inhalt-mitte {max-width: 916px;} /* maxBreite 960 - (2x 22 px) = 916 px */

/* --- Layout-Parameter --- */
#block_max{ text-align: center; position: absolute; width: 100%; height: 100%; }
#block_innen{ height: 100%; margin: 0px auto; }

#kopf {width: 100%; height: 50px; position: fixed; top:0px; /* fixieren am oberen Rand */ background-color: #006699;}
#kopf-links, #kopf-rechts{width: 2%; min-width: 22px; height: 50px; float:left; background-color: #006699;}
#kopf-mitte {background: #FFF; height: 45px; float: left; width:96%; }

#inhalt {width: 100%; height: 100%;}
#inhalt-links, #inhalt-rechts, #inhalt-mitte {height: 100%; margin-top: 50px;} /* Abstand nach oben gleich der Höhe von Kopf */
#inhalt-links, #inhalt-rechts{width: 2%; min-width: 22px; float:left; background-color: #006699; }
#inhalt-mitte {background: #FFF; float: left; width:96%; overflow: hidden; }

</style>
</head>

<body>
<div id="block_max">
<div id="block_innen">
<div id="kopf">
<div id="kopf-links"></div>
<div id="kopf-mitte">
<p>KOPF</p>
</div>
<div id="kopf-rechts"></div>
</div>
<div id="inhalt">
<div id="inhalt-links"></div>
<div id="inhalt-mitte">
<p>INHALT 1</p> <p>INHALT 2</p> <p>INHALT 3</p> <p>INHALT 4</p> <p>INHALT 5</p> <p>INHALT 6</p>
<p>INHALT 7</p> <p>INHALT 8</p> <p>INHALT 9</p> <p>INHALT 10</p> <p>INHALT 11</p> <p>INHALT 12</p>
</div>
<div id="inhalt-rechts"></div>
</div>
</div> <!-- end of block_innen
</div> <!-- end of block_max
</body>
</html>

----
Schönes Wochenende.
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.