Mac

2020-08-17T05:18:09Z

84.155.186.41: /* Mac Probleme lösen */

Hier finden sich einige nützliche Infos zum Apple Mac
== Weitere Links ==
http://www.apfelwiki.de/

[[Terminal und Konsole auf dem Mac]] Einige Hinweise für LINUX Leute die auf dem Mac unterwegs sind

http://www.macports.org/index.php Einfaches Kompilieren und Installieren von Konsolen X11 und Aqua OpenSource Programmen What is MacPorts?

MacPorts provides an infrastructure for building, installing, and packaging open source software. It is designed to match the functionality of the FreeBSD Ports system and to be extensible for future enhancements.

[[MacPorts]]

[[Networksniffer - Netzwerkverkehr kontrollieren mit Wireshark]]

[[Mac als Proxy Server]]

== Mac OS Tipps und Tricks ==
[[Mac - Tipps und Tricks]]

== Mac, Apache, PHP, MySQL (MAMPP) ==
Hinweis: auch XAMPP gibts jetzt für Mac. Ist eigentlich einfacher: In den Applications Ordner packen fertig.

Weiterführender schon etwas älterer aber ordentlicher Artikel: http://oreilly.com/pub/ct/49

Artikel über die Aktivierung von mySQL, PHP, fehlende PHP Module etc.: http://www.viames.it/mac-os-x.html

=== Lösung 1 : MAMPP-Paket installieren ===
Oder alternativ die Sachen einzeln draufspielen...

Standardmäßig erreichbar unter

http://localhost:8888/

=== Apache ===
Ist beim Mac schon dabei und kann unter Systemeinstellungen > Sharing > Personal Web Sharing aktiviert werden
Die Seiten sind dann unter
localhost (Root Benutzer)
oder
localhost/~benutzername
erreichbar außerdem kann man auch benutzer.local eingeben dann wird ein Apple-Interner Dienst benutzt um die Adressen umzuwandeln.

Ansonsten gelten weitgehend die gleichen Regeln für die Konfiguration wie unter Linux.

=== Wichtige Daten für den Mac als Webserver ===
Stand April 2009
Apache Config: /etc/apache2/httpd.conf
PHP als Modul aktivieren (muß installiert und kompiliert sein):
in Apache Config:
LoadModule php5_module libexec/apache2/libphp5.so
Der Ordner für php Extension ist hier angegeben:
/etc/php.ini
z.B.:
; Directory in which the loadable extensions (modules) reside.
extension_dir = "/usr/lib/php/extensions/no-debug-non-zts-20060613"

=== PHP ===
Hinweis: Bei Apache2 hat sich einiges geändert.
Konfiguration des Apache ist in
etc/apache2
Ist auch schon dabei muß aber noch aktiviert werden und bei der Gelegenheit auch gleich die Ausführung von CGI Skripten:
Zuerst mal ins Terminal wechseln (suche einfach mit Spotlite nach terminal)
Dann Sysadmin werden:

sudo -s

mit

cd /etc/httpd

wechselt man ins Apache Konfigurationsverzeichnis. Jetzt legen wir eine sicherheitskopie der Konfigdatei an:

sudo cp httpd.conf httpd.BAK

Nun verwenden wir den Editor vi um die entsprechenden Zeilen in der httpd.conf auszukommentieren. Mittels '''x''' wird in '''vi''' ein Zeichen gelöscht, mittels ''':wp''' werden die Änderungen geschrieben und vi beendet. In unserem Falle wird jeweils das # vor der entsprechenden Zeile entfernt.

sudo vi /etc/httpd/httpd.conf

Ein alternativer Editor unter Mac/Linux ist Pico. In Pico speichert man mit CTRL+o (write out) und kann Suchen mit CTRL+w (where is)

sudo pico httpd.conf

Für die Bedienung von Vim und Pico, gibt es eine Hilfefunktion mit F1

Nun nach unten Scrollen, die folgenden Variablen suchen und das # löschen.

#AddHandler cgi-script .cgi
#LoadModule php4_module
#AddModule mod_php4.c

Nun speichern und Apache neu starten:

:wq (mit vim)
ctrl+o (pico)
sudo apachectl graceful

Zum Testen ob php funktioniert schreiben wir ein kleines php-Programm, daß uns die aktuelle php-konfiguration ausgibt und speichern es unter

'''info.php'''
<?php
phpinfo();
?>

Im Browser geben wir ein:
http://localhost/~benutzername/phpinfo.php

Und wenn alles klappt sehen wir eine Lange Liste mit allen möglichen php und Servereinstellungen.

===MySQL installieren===
==== Neues Tutorial ====
MySQL DBMS isn’t installed by default on Mac OS X Leopard. If you need it, it’s quietly easy to install on Leopard: download MySQL 5.1 for Mac OS X 10.5 (x86_64), launch its setup wizard and edit php.ini to connect through the right mysql socket:

[MySQL]
; Default socket name for local MySQL connects. If empty, uses the built-in
; MySQL defaults.
mysql.default_socket = /tmp/mysql.sock

[MySQLi]
; Default socket name for local MySQL connects. If empty, uses the built-in
; MySQL defaults.
mysqli.default_socket = /tmp/mysql.sock

A web-server restart is required in order to apply any httpd.conf or php.ini changes. All extension files need to be executable by apache's user.

==== Alte Version ====
Herunterladen der Datenbank 4 oder neuer unter
http://dev.mysql.com/downloads/mysql/4.1.html
Doppelklick mounted das disk image. Dann Doppelklick auf das Package File und Die Datenbank wird installiert. Wenn eine alte Version läuft dann vorher abschalten (das ReadMe File gibt Tipps)

Die Datenbank wird hier installiert:
/usr/local/mysql-VERSION

Als nächstes speichern wir den Pfad zu MySQL in den Umgebungsvariablen der Shell, auf diese Weise muß man nicht jedesmal den Pfad eingeben oder in das Verzeichnis wechseln.
Das Terminalfenster muss nach Eingabe des Codes neu gestartet werden, damit die Änderung aktiv wird.
'setenv PATH /usr/local/mysql/bin:$PATH' >> ~/.tcshrc
Für tcsh (Mac OS X 10.2)

echo 'export PATH=/usr/local/mysql/bin:$PATH' >> ~/.bash_profile
Für bash (Mac OS X 10.3, 10.4)

Jetzt wechseln wir in das MySQL Verzeichnis und ändern die Rechte für das Verzeichnis data (dort sind die Datenbanken gespeichert)
cd /usr/local/mysql
sudo chown -R mysql data/

Nun testen wir ob die Datenbank erreichbar ist
sudo echo
sudo ./bin/mysqld_safe &
/usr/local/mysql/bin/mysql test

Nicht vergessen das Root Passwort zu setzen:
/usr/local/mysql/bin/mysqladmin -u root password new_password_here

==== Tabellen und Datenbanken ====
Jetzt wird es Zeit eine neue Datenbank anzulegen. Dazu loggen wir uns in den mySQL Server ein legen eine neue Datenbank an und erlauben vollen Zugriff für Herrn benutzername. benutzername wir durch den eigenen MacOsX Benutzernamen ersetzt.
mysql -u root -p
create database mein_DB_Name;
grant all on mein_DB_Name.* to benutzername@localhost identified by "passwort";

Hinweis: in der ersten Zeile haben wir uns den langen Pfad erspart weil wir ja in der bash einen neue Pfad-Variable gesetzt haben.

=== ImageMagick ===
Ist in den Macport Tools enthalten. Macports installieren falls nicht vorhanden (siehe Macports), danach sind die Tools in /opt/local/bin/ enthalten. Dies ist auch der Pfad der in der TYPO3 Installation angegeben werden muß.

==== Vorkompilierte Datei (bei Benutzung von Macports nicht notwendig)====
http://www2.entropy.ch/download/imagemagick-6.1.7.pkg.tar.gz
1) Mit boomArchivHelper aus dem System auspacken (Rechte Maustaste "Öffnen mit" / nicht stuffit-expander, da sonst eine Fehlermeldung, daß das Archiv kaputt ist)
2) Mit dem Installer installieren
3) typo3 localconf.php updaten

== Software Grundausstattung ==
=== Developer Tools ===
[[Homebrew Paketmanager für Mac OS X]] oder [[MacPorts]]

=== Freeware ===
Tools
* Filezilla (FTP)

Editor:
* NetBeans IDE von Sun (wenns etwas größer Sein darf)
* Alternativ Eclipse (Geschmacksache)
* Textwrangler (Freeware kann nicht besonders viel)

Thumbnail Viewer:

Office

* OpenOffice > Version 3.1
* Freemind OpenSource Mindmapper (einfach und effektiv)
* Baralga (OpenSource Tool zur Zeiterfassung in Java geschrieben)

Projektverwaltung

=== Kostenpflichtig ===
TextMate Editor

== Windows auf dem Mac ==
Auf den Intel Macs ist es möglich Windows zu installieren.

1. Lösung BootCamp von Apple

Vorteil - pure Windowsinstallation mit allen Features, kostenlos

Nachteil - Der Rechner muß zum Wechsel runtergefahren werden

2. Lösung Parallels

Vorteil - Wird im Fenster Parallel zu MacOS ausgeführt, auch andere OS verfügbar

Nachteil - im Moment kein DirectX, kostenpflichtig (ca. 80 Euro)

[[Tutorial: Windows auf dem Mac]]

== Sonderzeichen und Spezialtasten auf dem Mac ==
Tilde ~ : ALT + n

Pipe | : ALT + 7

Backslash \ : ALT + SHIFT + 7

Funktionstasten sind oft mit Systemfuktionen (Dashboard etc. vorbelegt) ESC + Zahl gehts aber (nacheinander drücken). Andere Möglichkeite ist Apfel + Funktionstaste (hier gleichzeitig) damit wird der Tastendruck an die Anwendung durchgereicht.

Laptops, Powerbooks, etc. haben oft keine Entf Taste. Mit fn+ Backspace geht's

Apfel + Backspace löscht Dateien direkt

== JAVA ==
Ist auf dem Mac schon installiert. Schwierig wird es wenn die Version zu alt ist. Dann ist man nämlich auf Apples Update Politik angewiesen und wenn das iPhone gerade wichtiger ist... kann es dauern.

=== JAVA Einstellungen ===
In den Dienstprogrammen kann man z.B. die Default Version einstellen. Getrennt für Web Applets und Java Anwendungen (Programme/Dienstprogramme/Java). Wenn beim Starten von Java Applications ein Fehler auftritt hilft es manchmal hier die Default Java Version zu verändern. Einfach in der Liste die gewünschte Version nach oben ziehen.

== Mac Ärgernisse ==
Trotz aller schönen Dinge bietet der Mac doch einige Ärgernisse. Interessanterweise zeigt der geneigte, sonst so kritische Mac User sich diesen gegenüber erstaunlich resistent. Zumindest wenn man den Forenbeiträgen glauben schenkt. Der Gerechtigkeit wegen hier einige der kleinen Haken im Mac-Leben.

Fehlermeldung: Auf das drahtlose '''netzwerk''' wurde möglicherweise unerlaubt zugegriffen... daraufhin wird das Netzwerk für kurze Zeit zurückgesetzt.

Der Fehler tritt scheinbar auf wenn andere Rechner im Drahtlosen Netzwerk aktiv sind. Abhilfe bringt wenn das Netzwerk auf WPA2 AES upgedatet wird.

Fehlermeldung: Sinngemäß: Nix geht mehr schalten Sie den Rechner aus...
Kommt zum Beispiel bei vielen offenen Flash-Filmen im Browser vor.

Fenster auf allen Seiten vergrößern

Schriften werden auf einmal in verschiedenen Programmen nicht mehr richtig dargestellt.
Lösung: Font Cache löschen: http://adminday.de/tutorials-und-tipps/fontcache-unter-mac-os-x-10-6-loschen/

Time Machine geht nicht über Netzlaufwerke (zumindest nicht ohne weiteres

=== Video und Audio-Dateien auf dem Mac ===
Oft gibt es das Problem, daß man Audio und Video Dateien auf dem Mac nicht abspielen kann. Es gibt einige Tools die Helfen können.

Zum Thema Video gibt es hier einige Infos: [[Video]]

== Benutzerordner auf andere Festplatte verschieben ==
Wenn man als Startvolume z.B. eine SSD hat, kann es sein, daß man die Benutzerordner lieber auf eine andere HDD nutzen möchte um die SSD nicht vollzumüllen.

So geht es:
* Benutzerordner an neuer Stelle anlegen (z.b. Benutzer)
* 2. Finderfenster > Gehe zu > /
* Benutzerordner kopieren
* Um den Ordner zu ändern braucht es einen zweiten Benutzer, da der eigene Benutzerordner ja in Gebrauch ist. Also 2. Admin und in diesen wechseln.
* Mit dem zweiten Benutzer die alten Daten löschen (oder erstmal auf Backupfestplatte)
* Unter Benutzer bei dem betreffenden Benutzer Rechtsklick und Erweitert kann man den neuen Ordner wählen. Die Rechte werden automatisch angepasst.

== Time Machine über Netzlaufwerke nutzen ==
Hinweis - scheint inzwischen (2016) einfacher zu funktionieren.

=== Lösung 1 ===

Link: http://www.ratschlag24.com/index.php/mac-os-x-time-machine-auch-mit-netzlaufwerken-nas-laufwerken-und-wlan-festp/

'''Rechnername des Mac-Rechners rausfinden.'''

Terminal
scutil --get ComputerName

'''MAC Adresse der Netzwerkkarte rausfinden'''
ifconfig en0 | grep ether
(Pipe Zeichen mit ALT+7)

Die MAC-Adresse besteht aus zwölf Zahlen-/Buchstaben-Paaren. Merken Sie sich auch diese Adresse.

'''Sparsbundle Diskimage mit ausreichender Größe erzeugen'''

3. Timemachine speichert seine Daten in einem sog. Sparsebundle. Im nächsten Schritt müssen Sie ein Disk-Image nach einem ganz bestimmten Namensmuster anlegen. Hierzu geben Sie in das Terminalfenster einen Befehl nach folgendem Muster ein:

hdiutil create -size 100g -fs HFS+J -volname TM-Backup "<Computename>_<MAC-Adresse>.sparsebundle"

<Computername> s.o. <MAC Adresse> s.o. ohne Doppelpunkte eingeben

Beispiel:

hdiutil create -size 100g -fs HFS+J -volname TM-Backup "Mirko Müllers MacBook_001ff3d0b9c8.sparsebundle"

Damit wird eine Backupdatei mit einer Maximalgröße von 100 GB angelegt. Sie finden die so erzeugte Datei in Ihrem Dokument-Verzeichnis.

Schalter “100g” entsprechend anpassen, etwa “200g” für eine maximal 200 GigaByte große Time-Machine-Datei. Die Datei wird nicht sofort 100 GB, sondern nur knapp 80 MB groß. Erst durch die Sicherheitskopien wächst die Datei später auf die Maximalgröße.

'''Datei auf die Netzwerkfestplatte kopieren'''

Danach die Lokale Datei löschen.

'''Konfigurationsänderung'''

Mit einer Konfigurationsänderung akzeptiert Time Machine auch Netzwerkordner als Backupmedien.

defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1

Das war’s. Wenn Sie jetzt die Systemeinstellung “Time Machine” öffnen, können Sie über die Schaltfläche “Volume wechseln” auch das Netzlaufwerk auswählen. Ganz wichtig: Wählen Sie den Netzwerkordner, in den Sie in Schritt 4 die “sparsebundle"-Datei kopiert haben.

[Update]: Einige Leser berichten von Problemen bei der Anmeldung in der TimeMachine. Mitunter tritt zum Beispiel der FEhler “OSStatus-Fehler -6602” auf. Die Lösung: Richten Sie auf dem Netzlaufwerk einen neuen Ordner “backup” ein, und legen Sie dort die sparsebundle-Datei ab. Dann klappt’s auch ohne Fehlermeldung.

Quelle s.o. Verfasst 2008 Zugriff 06/2011

Problem unter 10.6 hdiutils der Vorgang wird nicht unterstützt

=== Time Maschine Backups auf NAS übers Netzwerk wiederherstellen ===

Genauso wichtig wie das Erstellen von Backups ist natürlich das Wiederherstellen der Sicherungen. Da NAS-Server nicht offiziell unterstütze Laufwerke sind, muss man sich hier auch einiger „Handgriffe“ bedienen. Dazu geht man wie folgt vor:

* Den Mac mit einer Leopard-Installations-DVD und angeschlossenem Netzwerkkabel booten.
* Nach dem Booten unter Dienstprogramme das Terminal starten.
* Über einen "PING" testen, ob das NAS über Netzwerk erreichbar ist. Dazu den Befehl ping 192.168.1.10 ins Terminal eingeben, wobei die IP abhängig vom Netzwerk zu wählen ist.
* Einen Mount-Point für das NAS erstellen, indem man ein Verzeichnis mit nachfolgenden Befehl im Terminal erzeugt:

mkdir /Volumes/backup

* Jetzt muss das Verzeichnis in dem das Time Maschine Backup liegt als Volume gemountet werden. Dazu gibt man im Terminal ein:
mount_afp afp://$USERNAME:$PASSWORT@$NAS_IP_ADDRESSE/$VERZEICHNIS /Volumes/backup
Als $NAS_IP_ADDRESSE steht bei mir die 192.168.1.10 und bei $VERZEICHNIS das von mir erstelle Verzeichnis andreas
Mit dem Befehl
ls /Volumes/backup
kann überprüft werden, ob sich das Sparseimage im Verzeichnis befindet
Jetzt kann im Menü Dienstprogramme > Systemwiederherstellung auf das Time Maschine Backup auf dem NAS zugegriffen werden.

== Mac Terminal Tipps ==
[[Mac Terminal Tipps]]

== Mac Probleme lösen ==
[[Mac - Probleme beheben]]

== Mac - Wartung und Tools ==
[[Mac - Wartung und Tools]]

== Mac - Innereien ==
=== Mac - Zugriffsrechte ===
In Mac OS werden diese fünf Benutzergruppen unterschieden:

*'''staff''': Dieser Gruppe gehören alle lokalen Benutzer des Mac OS an. Auf älteren Mac OS-Systemen wird diese Gruppe als users angezeigt
*'''everyone''': Dieser Gruppe gehören alle an, die einen Account auf dem Mac haben.
*'''wheel''': Diese Gruppe ist eine private Gruppe des Benutzers root (root: aus dem Englischen Wurzel, bezeichnet den Superuser, der alles machen kann und darf).
*'''admin''': Dieser Gruppe gehören alle Benutzer an, die Administratorrechte haben.
*'''nobody''': Dieser Gruppe gehören alle restlichen Benutzer an, die kein eigenes Benutzerkonto auf dem Mac haben. Damit ist nobody gewissermaßen die Differenz der Gruppen staff und everyone.
=== Mac - Zugriffsrechte reparieren ===
Auf Sierra hat sich einiges geändert. Eigentlich soll sich das System selbst reparieren. Das klappt aber nicht immer. Anleitung von Apple:
https://support.apple.com/de-de/HT203538

https://www.ionas.com/wissen/zugriffsrechte-auf-dem-mac-aendern-oder-reparieren/ (2016-12)
In Mac OS lassen sich Zugriffsrechte auf 4 verschiedene Arten ändern:

*Über das Fenster Informationen (cmd+i).
*Über das Terminal (chmod und chown wie bei UNIX/LINUX üblich).
*Über das Festplattendienstprogramm (Erste Hilfe).
*Recovery Modus über Passwörter zurücksetzen.
==== Rechte über Recoverymodus zurücksetzen ====
* Starten Sie Ihren Mac mit „CMD + R“ in den Recovery Mode.
* Nachdem der Mac im Recovery Mode gestartet ist, wählen Sie als erstes Ihre Sprache aus und klicken Sie auf den kleinen Pfeil. Klicken Sie anschließend in der Menüleiste ‚Dienstprogramme‘ an und wählen Sie ‚Terminal‘.
* Nachdem das Terminal-Fenster geöffnet ist geben Sie ein:
resetpassword
* Danach öffnet sich das Fenster für ‚Passwörter zurücksetzen‘. Wählen Sie nun Ihre Festplatte und den Benutzeraccount aus. Im unteren Bereich wird die Option für ‚Zugriffsrechte und Zugriffsteuerungslisten für den Benutzerordner zurücksetzen‘ aktiv. Mit einem Klick auf ‚Zurücksetzen‘ werden eventuelle Probleme mit den Zugriffsrechten in Ihrem Benutzerordner zurückgesetzt.

===Mac - System Management Controller (SMC)===
Muß man sehr selten zurücksetzen. Manchmal gibt es seltsame Probleme z.B. mit Hardware (Tastatur etc.) dann kann das zurücksetzen des SMC manchmal helfen.

[[Mac - System Management Controller (SMC)]]
===PR-RAM / NVRAM===
[[Mac - PR-RAM / NVRAM]]

Scroll-Snap

2020-07-21T11:10:52Z

84.155.186.41: /* Scroll-Snap im Container */

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
https://css-tricks.com/practical-css-scroll-snapping/
https://stackoverflow.com/questions/53981699/pure-css-scroll-snap-only-works-with-the-body-as-the-container

== Scroll Snap Basics ==
Die wichtigsten Eigenschaften sind
scroll-snap-type (Containerelement)
scroll-snap-align (Kindelement)
Die Eigenschaft scoll-snap-type wird auf das Elternelement angewendet und scroll-snap-align auf das Kindelement.

<pre>
/* Keyword values */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* etc */

/* Global values */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;
</pre>

Beispiel

Beispiel 2
<syntaxhighlight lang="html5">
<article class="scroller">
<section>
<h2>Section one</h2>
</section>
<section>
<h2>Section two</h2>
</section>
<section>
<h2>Section three</h2>
</section>
</article>

</syntaxhighlight>

<syntaxhighlight lang="css">
<section><h2>SCROLL ME</h2><p>horizontal</p></section>
<section><h2>SNAPPED</h2></section>
<section><h2>GO ON</h2></section>
<section><h2>THIS IS THE END</h2></section>
</syntaxhighlight>

<syntaxhighlight lang="css">
* {
box-sizing: border-box;
}
body,html{
text-align: center;
min-height: 100%;
margin: 0;
padding: 0;
color: white;
font-family: sans-serif;
}
html {
margin: 0;
scroll-snap-type: x mandatory;
}
body{
/*
NOT working
scroll-snap-type: y mandatory;
*/
display:flex;
}
h2{
text-align: center;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width: 100%;
flex-shrink: 0;
scroll-snap-align: start; /* Stop at the left */

background: #146585;
}

section:nth-of-type(even) {
background: #2b8664;
}
</syntaxhighlight>

== scroll-padding und scroll-margin ==
scroll-padding

Scroll-Padding setzt man im Container. Damit kann man erreichen, dass ein Element nicht direkt an den Rand schnappt, sondern kurz davor stoppt. Das ist z.B. bei einem fixed Header nützlich, der ansonsten den Inhalt überlappen würde.

scroll-margin

Ähnlicher Effekt wie bei Padding. Da man den scroll-margin im Kindelement setzt, kann man für jedes Element unterschiedliche Werte setzen.

== Beispiele ==
=== Scroll-Snap im Container ===
https://stackoverflow.com/questions/53981699/pure-css-scroll-snap-only-works-with-the-body-as-the-container
<pre>
<body>

<div class="container">

<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur eius est fuga inventore
officia possimus quibusdam recusandae sunt. Adipisci blanditiis corporis cupiditate dolorem ducimus
excepturi laboriosam officia quae vero.</p>
</div>

<div class="section">
<p>Accusamus amet dicta dolorum fugiat id itaque iure minus molestiae nesciunt non omnis quibusdam, veniam!
Animi, aspernatur consectetur doloremque ducimus illum perferendis quam ut? Aspernatur deserunt doloremque
error magnam minima.</p>
</div>

<div class="section">
<p>Ab accusantium aut corporis, cumque dolor ducimus ea est, excepturi facere, fuga id labore magni minima nemo
odio officia officiis quaerat quibusdam quo sit tempora tenetur unde veritatis! Doloremque, nam.</p>
</div>

</div>

</body>

</pre>

<pre>
.section {
height: calc(100vh - 14em);
font-size: 1em;
color: white;
padding: 7em;
margin: 0;
scroll-snap-align: start;
}
.section:nth-of-type(1) {
background-color: hsl(0, 100%, 30%);
}

.section:nth-of-type(2) {
background-color: hsl(40, 100%, 30%);
}

.section:nth-of-type(3) {
background-color: hsl(50, 100%, 30%);
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
margin: 0;
height: 100vh;
}

</pre>

You're almost there. By default, the <body> element has a fixed height of 100vh. You just need to add the same to your container class.

That gives the scroll something to snap to. Otherwise, the <div class="container"> will have a height equal to that of all the child elements combined, which doesn't give the scroll a fixed window to snap to.

Likewise, if you were doing horizontal scrolling, you'd need to provide your container with a fixed width.

Scroll-Snap

2020-07-21T11:07:40Z

84.155.186.41:

2020-07-20T07:25:22Z

84.155.186.41:

Google - API

2020-07-20T07:24:36Z

84.155.186.41:

Google - API

2020-07-20T07:24:22Z

84.155.186.41: Die Seite wurde neu angelegt: „Die Google API bietet mittlerweile eine Menge Tools die man nutzen kannn. Natürlich immer mit den üblichen Bedenken zur Datekrake Google. Man sieht allerding…“