css - 视差效果 - 仅垂直滚动

Question

我正在寻找解决我的问题的方法。我的网站上有一个 css 视差效果，当您垂直向下滚动页面时，它似乎可以正常工作。问题是，如果浏览器窗口宽度减小到小于页面内容的宽度，它也会水平滚动。我不想要水平视差效果。我使用的 CSS 是:

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

样本网站是http://bantamgraphics.com/parallax/如果浏览器窗口小于1000px，会出现水平滚动条，右侧显示深灰色的页面背景色。有没有办法阻止水平滚动？

Answer 1

您有一些内联宽度设置为 1000 像素的元素，这就是为什么它们在低于该断点的任何地方显示水平滚动。

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

和...

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

另外，在下表中有四个部分。这四个框每个的宽度为 230 像素，因此当屏幕小于 1000 像素宽时，230*4=920 像素加上您在每一侧设置的 40 像素填充(总共 1000 像素)大于视口(viewport)。

我建议为四个相等的框部分使用比表格更流畅的东西。