Question

我正在尝试使我的CSS Scroll Snap Points正常工作。我有一个主容器（div），名为website，里面有四个图像，设置为使用CSS水平滚动。我希望这四个图像有文字和图像（和其他东西）。因此，我需要使用div来包含这些元素。

当我只使用四个图像（img）时，水平滚动有效。但是，如果我在我的图像周围添加div s，则水平滚动不再起作用，最终看起来就像我将图像垂直放在彼此的顶部（正常格式）。

为什么水平滚动不适用于div，我该如何解决？

这是没有div s的代码（水平滚动工作）：

#website {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-white-space: nowrap;
	white-space: nowrap;
	margin: 0px;
	font-size: 0;
	width: 100%;
	-webkit-scroll-snap-type: mandatory;
	-webkit-scroll-snap-points-x: repeat(100%);
	scroll-snap-type: mandatory;
	scroll-snap-points-x: repeat(100%);
}

img {
	width: 100%;
}

body {
	padding: 0px;
	margin: 0px;
}

<head>
</head>


<body>
<div id="website">
		<img class="page" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/1.jpg" alt="">
		<img class="page" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg" alt="">
		<img class="page" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg" alt="">
		<img class="page" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg" alt="">
</div>
</body>

这是带有div s的代码（水平滚动不起作用）：

#website {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-white-space: nowrap;
	white-space: nowrap;
	margin: 0px;
	font-size: 0;
	width: 100%;
	-webkit-scroll-snap-type: mandatory;
	-webkit-scroll-snap-points-x: repeat(100%);
	scroll-snap-type: mandatory;
	scroll-snap-points-x: repeat(100%);
}

.page {
	width: 100%;
}

body {
	padding: 0px;
	margin: 0px;
}

<head>
	<link href="http://www.jeffarries.com/tests/scroll.css" type="text/css" rel="stylesheet" />
</head>


<body>
<div id="website">
	<div class="page">
		<img class="page" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/1.jpg" alt="">
	</div>
	<div class="page">
		<img class="page" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg" alt="">
	</div>
	<div class="page">
		<img class="page" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg" alt="">
	</div>
	<div class="page">
		<img class="page" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg" alt="">
	</div>
</div>
</body>

非常感谢！

Answer 1

稍稍更改CSS。这应该有效：

.page {
    width: 100%;
    display: inline;
}

为什么我的CSS Scroll Snap Points不能和`div`一起使用？

1 个答案: