scroll snap funktioniert nicht?

Hallo,

ich verstehe nicht, warum das hier nicht snappen will?

…
  <body style="scroll-snap-type: y proximity;">
    <div style="scroll-snap-align: start; height: 100vh; background-color: red;">x</div>
    <div style="scroll-snap-align: start; height: 100vh; background-color: blue;">x</div>
    <div style="scroll-snap-align: start; height: 100vh; background-color: green;">x</div>
…

Liegt es an meinem Browser?

MfG

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS, Webdesign

29.02.2020, 14:04

Dein Markup beinhaltet mehrere Fehler.

Der Doctype (Pflichtangabe) fehlt
Der Seitentitel (Pflichtangabe) ist leer
Dem meta-Tag fehlt ein name-Attribut
Hinter dem style-Attribut des body-Elements ist ein Anführungszeichen zu viel

Wieso verwendest du zudem nicht CSS-Selektoren? Du hast immerhin bereits einen style-Tag aufgeführt.

Bezüglich des scroll snapping würde ich dir empfehlen, diesen Artikel zu lesen.

maessigefrage

Fragesteller

29.02.2020, 14:09

vielen dank, aber ich habe das in dem file mit dem ich arbeite richtig und es geht trotzdem nicht. und an genau diesem artikel habe ich mich orientiert …

Ähnliche Fragen

Snappen oder Snapen?

Ich versteh nicht das manche menschen snapen schreiben ich bin ganz klar für snappen

...zur Frage

HTML Element von rechts nach links schieben bei scroll?

Ich suche ein einfaches Beispiel wie man ein HTML Element von links nach rechts schieben laest sobald das browser fenster runter gescrollt wird an den punkt wo das html element sichtbar sein soll.

ihr kennt das bestimmt was ich meine, diese modernen webseiten designs haben sowas oft, dann sieht alles bisjen cooler aus.

es gibt aber so viele verschiedene beispiele das ich nicht so das richtige finde.

was ich will ist ganz einfach das html element nach schieben und am besten noch mit so ein effekt dazu zum beispiel von durchsichtig zu undurchsichtig.

...zur Frage

HTML style="" nur erster a href funktioniert?

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Autotuning</title>
<link rel="shortcut icon" href="T4Nissan 240 SX BR101.png" type="image/x-icon">
<meta name="description" content="">
<link href="styleSeite1.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br><br><br><center>
<a href="NFSU.html"><img src="images/NFSU.jpg" width="" height="230" style="align:/></a>
<a href="NFSU2.html"><img src="images/NFSU2.JPG" width="" height="235" style="align:/></a>
<a href="NFSUC.html"><img src="images/NFSUC.JPG" width="" height="241" style="align:/></a>
<a href="NFSC.html"><img src="images/NFSC.JPG" width="" height="237" style="align:/></a>
<a href="NFSMW2005.html"><img src="images/NFSMW2005.JPG" width="" height="230" /></a><br>
<a href="MC3DER.html"><img src="images/MC3DER.JPG" width="" height="250" style="vertical-align:/></a>
<a href="MCLACE.html"><img src="images/MCLACE.JPG" width="" height="250"/></a>
<a href="Gran Turismo 6.html"><img src="images/Gran Turismo 6.jpg" width="" height="250" /></a>
<a href="LEGO.html"><img src="images/LEGO.JPG" width="" height="250" /></a><br>
<a href="Modellbau.html"><img src="images/Modellbau.jpg" width="500" height="" align="top"/></a>
<a href="Sonstige.html"><img src="images/Sonstige.JPG" width="230" height="" align="top"/></a>
<a href="GTA5.html"><img src="images/Coil Cyclone.jpg" width="350" height="" align="top"/></a>
<a href="Silent Hill.html"><img src="images/Halo.JPG" width="185" height="" align="top"/></a>
</body>
</html>

durch ,,style=""´´ werden die Hyperlinks ohne Abstand platziert. Warum werden diese Hyperlinks gruppiert und alle außer dem erstem werden ignoriert? Die Frage ist leicht zu verstehen beim Blick auf den F12-Debugger im Browser. </style> löst das Problem nicht. autotuningyv.square7.ch/Seite1.html. Kann jemand den Quelltext bitte korrigieren?

...zur Frage

Wieso wird CSS nicht übernommen?

Ich habe gerade ein Problem, das soo frustrierend ist. Ich bin HTML & CSS Anfänger und wollte eine Webseite aus einem Tutorial Video nachbauen. Die Inhalte und Struktur im HTML habe ich hinbekommen. Nun scheitere ich aber am CSS. (Browser Chrome) Für mich sieht alles richtig aus. CSS ist eigentlich eingebunden, aber die Eigenschaften werden nicht übernommen. Ich habe schon etliche Seiten durchforstet und keine Lösung hat funktioniert. (Cache leeren brachte nichts, Bei den anderen Browsern Firefox, Explorer und Safari besteht das gleiche Problem( ich habe auch keine Schusselfehler entdeckt). Die beiden Dateien liegen auch im selben Ordner. Liegt es vielleicht an meinem Laptop oder an den Browsern? Ich bin ratlos. Ich hoffe jemand kann mir irgendwie helfen.

Ich habe screenshots von der HTML-Datei und CSS-Datei beigefügt.

...zur Frage

Website wird im Browser nicht richtig angezeigt?

Hallo. Ich bin mal so verrückt und erhoffe mir hier auf meine komplexe Frage eine Antwort, auch wenn erfahrungsgemäß in diesem Forum ich selbst immer meine Probleme lösen muss. Also..... Ich habe meinen Frontend Development Kurs verkackt, weil:

Egal was ich mache, wenn ich mein HTML-Dokument im Browser öffne, und wirklich egal in welchem Browser, werden die Sachen die ich in meinem CSS-Dokument festgelegt habe nicht übernommen. Und die Website sieht demnach besch.... aus.

Zur Anmerkung: Bei meinem Mentor auf seinem Rechner hat alles einwandfrei funktioniert. Mit exakt dem gleichen Code. Wir haben es gemeinsam ausprobiert. Er meinte, es könnte bei mir ein Cache-Problem sein, aber ich habe keine Ahnung was das genau bedeutet. Ich kann gerne mit euch meinen kompletten Projekt-Code via GitHub teilen usw. falls das helfen sollte, aber zunächst meine Frage:

Woran liegt das? Himmel Orsch und Wolkenbruch, wie soll ich eine Website erstellen, wenn ich im Browser nicht mal mir ansehen kann wie das was ich fabriziere hinterher aussieht?

...zur Frage

DIV overflow: scroll; automatisch nach unten Scrollen?

Hallo,

ich habe ein Php Skript:

<?php
echo "<div class'eins'>Eins</div>"; 
echo "<div class'zwei'>Zwei</div>";


echo "<div class'output'>Hier <br/>ist <br/>der <br/>overflow: scroll;</div>";

echo "<div></div>";
?>

Den overflow: scroll; definiere ich in CSS.

Jetzt möchte ich, dass automatisch nach ganz unten gescrollt wird, wenn die Seite aufgerufen bzw. neu geladen wird.

Im Internet bin ich auf folgenden Code gestoßen:

<?php
echo '<body onLoad="letzteselement.scrollIntoView();">';

echo "<div class'eins'>Eins</div>"; 
echo "<div class'zwei'>Zwei</div>";


echo "<div class'output'>Hier <br/>ist <br/>der <br/>overflow: scroll; 
<a id="letzteselement" /> 
</div>";

echo "<div></div>";
?>

Bei Firefox funktioniert das auch einwandfrei, wenn ich allerdings einen anderen Browser benutze (z.B. Microsoft Edge) ist es, als ob der Code nicht existier -> es passiert nichts.

(Ich weiß nicht, ob es wichtig ist, aber der Inhalt meines Div wird aus einer Datenbank ausgelesen und ist relativ groß (Text))

Kent jemand noch einen anderen Code, der immer funktioniert?

...zur Frage

Wie kann ich den Hintergrund einer Webseite beim scrollen seitlich bewegen lassen?

Ich bin relativ neu in der Webdesign-Branche und surfte etwas, um mir Inspirationen einzufangen. Bei der Internetseite der Firma Unilever (Unilever.com). blieb ich hängen und fragte mich, wie es wohl funktioniert, dass sich der Hintergrund beim auf und ab scrollen horizontal bewegt. nur mit html und css ist dies nicht möglich, oder? aber wie dann?

...zur Frage

Automatisch Scrollen?

Hallo,

auf meiner Website hab ich 2 Icons, die durch eine Klick Funktion jeweils ein Div darunter erscheinen lassen.

Sobald ein Div erscheint oder ich die passende Klasse hinzufüge soll nun zu den passenden Div runter oder zum Seitenanfang gescrollt werden.

Wo liegt der Fehler ?...ich steh etwas aufm Schlauch.

Das Problem muss nicht unbedingt mit einer Scroll function gelöst werden =)

function klick() {
    let hauptDiv = document.getElementById('div_eins');


    if (hauptDiv.classList.contains('unsichtbar') == true) {
        hauptDiv.classList.remove('unsichtbar');
        hauptDiv.classList.add('sichtbar');
        window.scrollTo(0, 100);
    } else if (hauptDiv.classList.contains('sichtbar') == true) {
        hauptDiv.classList.remove('sichtbar');
        hauptDiv.classList.add('unsichtbar');
    }   else {
           return;
        }
    }

...zur Frage

Kann mir jemand bei HTML/CSs helfen?

Ich hab da eine Frage an die ganzen Webdesign-Profis von euch:

Folgendes:

Auf meinem iPhone 11 Pro habe ich das Problem, dass wenn ich auf der Leistungen-Seite bin, immer ein wenig zu viel rand auf der rechten seite ist, was beim hoch und runter scrollen extrem stört. Für die Produkt-Präsentation nutze ich eingebaute Plugins von Elfsight, welche ich aber durch Custom-Css stylen kann. Wo liegt das problem? warum tritt das bei dieser Seite auf aber sonst nirgendwo? Muss ich etwas an diesen Plugins ändern oder liegt es an etwas anderen?

Hier ein Link: https://online.bss.design/leistungen.html

Achtung: Bei größeren Bildschirmen tritt das Problem nicht auf.

...zur Frage

Einen bestimmten, festgelegten Bereich einer anderen HTML Seite per iframe einbetten - mit HTML & CSS möglich? habt Ihr Ideen wie man es lösen könnte?

Hallo an alle :)

Eine Seite generell einzubetten, habe ich hinbekommen, ebenso habe ich das Scrollen im iframe bereits (wie auch gewünscht) deaktiviert und wenn man auf Links klickt, öffnen sich diese nicht im eingebetteten Rahmen, sondern in einem neuen Browser-Tab. Soweit, so gut.

Aktuell hänge ich an der Frage, wie und ob, ich auf der Seite, in diesem "iframe" einen bestimmten, von mir vordefinierten Teil der eingebetteten Seite anzeigen lassen kann!? Aktuell wird einfach der komplette obere Teil der eingebetteten Seite angezeigt (weil ich scrollen deaktiviert habe), man soll allerdings nur einen Teil in der Mitte der eingebetteten Seite sehen, nicht die komplette Seite. Habt ihr eine Idee, wie und ob man das am einfachsten lösen kann?

vielen Dank und viele Grüße :)

Anke

...zur Frage

Div soll beim scrollen am Bildschirmrand fixiert werden?

Hallo,

Ich habe ein Div, welches unter einem anderen Div liegt. Wenn ich nun scrolle, soll das Div, sobald es am oberen Browserrand ist, dort fixiert sein. Ich habe folgenden Code ausprobiert, aber leider funktioniert dieser nicht:

.fixed {position: fixed; top:0; }

Kann mir jemand helfen, was an dem Code falsch ist? Kenne mich leider nicht so sehr mit Javascript aus.

Vielen Dank im Voraus

...zur Frage

Webseite wird von anderen Browsern anders angezeigt?

Hey, ich arbeite gerade an einer Webseite für eine Projektarbeit. Dabei habe ich nun die Webseite online gestellt. Jedoch wird die Webseite (Hintergrund und manchmal Strukturierung) im Chrome/ Safari Browser falsch angezeigt, aber beim Edge Browser funktioniert alles. Ich habe die Dateien Lokal auch immer im Google Chrome Browser geöffnet und da wurde es immer richtig angezeigt. Woran liegt es, dass es online anders angezeigt wird?

PS: Bei Firefox funktioniert die Webseite auch richtig

http://www.projektarbeit-webseite.de/

...zur Frage

SCSS wird nicht mehr umgewandelt / gegriffen (Terminal, SASS)?

Hi zusammen,

ich baue zu Zeit eine Website mit HTML /CSS (scss). Über das Terminal lasse ich mein SCSS in CSS umschreiben. Bisher hat das Terminal immer gut seinen Job erledigt. Bis gerade eben (falls es überhaupt am Terminal liegt). Ich navigiere wie immer in meinen Ordner, in dem die style.scss udn die style.css liegt. Wenn ich mit mich mit dem Terminal in dem Ordner befinde schreibe ich folgenden Befehl:

sass --watch scss/style.scss:css/style.css

Bisher hat das immer gut funktioniert. SCSS wurde in CSS umgeschrieben. Jetzt aber kann ich nach Eingabe des Befehls einmal etwas in dem SCSS-Code ändern, die Änderung wird dann auch im Browser angezeigt - sobald ich dann aber ein zweites Mal etwas ändere schreibt das Terminal zwar:

Compiled scss/style.scss to css/style.css.

.. aber der Browser zeigt keine Änderung an. Das SCSS wird also irgendwie nicht mehr genommen.

Weiß jemand woran das liegt und kann mir weiterhelfen?

...zur Frage

Ist es möglich die Scroll-Position zu verändern in HTML/CSS?

Ich habe einen festen Header, welcher 7% der Seite beansprucht. Wenn ich jetzt auf einen Anker klicke, der zu einer Section führt (also z.B '#home') dann Scrollt der Browser immer so weit, bis die Section ganz oben auf der Seite ist, also unter dem Header. Die Scroll-Position müsste also um 7% verschoben sein. Ist das ohne JavaScript möglich?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen