Ich suche nach einer Lösung für mein Problem. Ich habe einen CSS-Parallax-Effekt auf meiner Website, der funktioniert, wenn Sie die Seite vertikal scrollen. Das Problem ist, dass es auch horizontal scrollt, wenn die Breite des Browserfensters auf weniger als die Breite des Seiteninhalts reduziert wird. Ich möchte den Parallax-Effekt nicht horizontal. Die CSS Ich verwende ist:Parallax-Effekt - Nur vertikales Scrollen

background: url(images/home.jpg) 50% 0 no-repeat fixed; 
height: 500px; 
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative;

Probenort http://bantamgraphics.com/parallax/ ist Wenn das Browserfenster kleiner als 1000px, eine horizontale Bildlaufleiste angezeigt wird und die Seite Hintergrundfarbe dunkelgrau zeigt auf der rechten Seite. Gibt es eine Möglichkeit, das horizontale Scrollen zu blockieren?

2016-04-18 Stephen

Hinzufügen von 'overflow-x: hidden' zum Körper kann sein? –

Vielen Dank Mike, das funktioniert mit verhindern, dass die gesamte Seite eine horizontale Bildlaufleiste hat. Ich würde es vorziehen, nur zu verhindern, dass der Bildbereich scrollt, aber dies kann eine vorübergehende Lösung sein. Ich habe versucht, overflow-x: nur dem #home-Artikelstil hinzuzufügen, aber das hat auch nicht funktioniert. – Stephen

Wenn das der Fall ist, können Sie die gleiche CSS-Regel zum übergeordneten Container dieses Bildes hinzufügen. set width: 100% und overflow-x: versteckt. –

Sie haben ein paar Elemente mit einer Inline-Breite, die auf 1000px eingestellt ist, deshalb zeigen sie horizontales Scrollen bei irgendetwas unter diesem Breakpoint.

<div style="width:1000px; height: 93px;" align="center" id="topnav">

und ...

<table width="1000" border="0" cellspacing="0" cellpadding="0">

Auch in der Tabelle unten haben Sie die vier Abschnitte. Diese vier Felder sind jeweils 230px breit, also 230 * 4 = 920px plus die 40px Auffüllung, die Sie auf jeder Seite eingerichtet haben (1000px insgesamt) ist mehr als das Ansichtsfenster, wenn der Bildschirm weniger als 1000px breit ist.

Ich würde vorschlagen, etwas etwas flüssiger als eine Tabelle für die vier gleiche Boxen Abschnitt.

Quelle

2016-04-18 16:51:27

Danke Shawn, aber es gibt ein paar Fälle, wo ich den Inhalt bei 1000px unter der Parallaxe fixieren muss. Also suche ich nach einem Stil oder alternativen Weg, um nur den Parallaxeffekt vertikal zu halten. – Stephen

Ich fand eine Lösung für das Problem. Durch Hinzufügen einer minimalen Breite zu jedem horizontalen Teil scrollte die Site nicht mehr horizontal über den Inhalt hinaus.

sitewrapper {min-width: 1000px;}

Quelle

2016-04-27 18:22:58 Stephen

Parallax-Effekt - Nur vertikales Scrollen

Antwort

sitewrapper {min-width: 1000px;}

Verwandte Themen