Bereiche
News
Rewind
Tipps & Berichte
Forum
Galerie
Journals
Events
Umfragen
Themenwoche
Kleinanzeigen
Interaktiv
Anmelden
Registrierung
Zu allen empfangenen Nachrichten
Suche...
Zur erweiterten Suche
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
10.06.20
14: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.
Hilfreich?
0
Kommentare
Hakke
10.06.20
17:29
Das Nachfedern ist doch eine Funktion von macOS. Mit Tinkertool kann man das abschalten, aber eben nur auf dem eigenen Rechner.
Hilfreich?
0
albertyy
10.06.20
17:38
"nachfedern" ? !
hab´ich hier noch nie gehabt.
Was soll das sein ?
10.14.6 Safari 13.1.1
Hilfreich?
0
jens-ulrich
10.06.20
19: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?)
Hilfreich?
-1
Kapeike
10.06.20
19: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
Hilfreich?
+2
jens-ulrich
10.06.20
19: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.
Hilfreich?
0
albertyy
11.06.20
12: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.
Hilfreich?
0
albertyy
11.06.20
12:20
@kapeike
Da benutz man irgendwelche unsinnigen Sondertools als gemeiner User und beschwert sich dann, wenn irgendetwas hüpft und springt .....
Das meinte ich
Hilfreich?
-3
jens-ulrich
11.06.20
13: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.
Hilfreich?
+1
Deichkind
11.06.20
13: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.
Hilfreich?
+1
Kapeike
11.06.20
13: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)
Hilfreich?
0
chevron
11.06.20
13: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.
Hilfreich?
+1
jens-ulrich
11.06.20
13: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.
Hilfreich?
0
jens-ulrich
12.06.20
16: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.
Hilfreich?
0
Kommentieren
Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.
Vor 10 Jahren: 3 Milliarden für Beats
iPhone 16 Pro in Einzelteilen – Details zum Auf...
iOS 18 und iPadOS 18 lassen sich ab sofort laden
Apple Event
Das MacBook Pro M4
iPhone 16 Pro: Tippen oder Wischen ignoriert, N...
macOS 15 Sequoia ist da – Apple hat den Startsc...
Kopplung "iPhone + Apple Watch" sowie Anbindung...