停止网页水平滚动

Question

我想禁用我的网页从水平滚动，但允许它继续垂直滚动。网页本身只是列出png图像。没有代码我发现在线已成功地使我禁用水平滚动。由于某种原因，我使用的图像使浏览器分配额外的空间来滚动。我很感激任何解决问题的新主意。

<style type="text/css">
body {
min-width: 960px;
overflow: hidden;
background-color: #FF0; /**/
 }
 </style>

Answer 1

您想要的实际上是默认行为。默认情况下，浏览器只会让页面垂直滚动。除非它包含的内容比视窗更宽。这可能就是你的问题所在。

首先，我强烈建议你永远不要使用绝对定位(除非你真的需要)。它扰乱了页面的流程，而且维护或使其响应非常痛苦。(这些内联样式的属性也很少是一个好主意，但那是另一回事)

所以，如果你摆脱了你的absolute，你所要做的就是确保你的图像永远不会比它们的父图像宽。这很容易通过一行css实现:

max-width: 100%;

瞧，这应该能奏效。看一下我为您设置的示例:http://jsfiddle.net/icebear/mywkmj7n/2/

如果您需要以不同的方式定位您的图像，您可以通过添加边距/填充，甚至使用浮动或相对定位来实现，就像我放在fiddle中的.center示例。

Answer 2

<style type="text/css">
body {
min-width: 96px;
max-height:  200%;
overflow-x: hidden;
background-color: #FF0; /**/
 }
</style>

试试放点内容进去