Html 如何仅允许水平滚动一行图像并显示溢出，而不水平滚动页面的其余部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13146895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?
提问by Matt Martin
I have a page with a body that's 960px wide and I have a row of images that I want to overflow out of the right side of the page, and allow for the display of the overflowed images and horizontally scrolling. I don't want the page as a whole to horizontally scroll, just that element.
我有一个页面的主体宽度为 960 像素，我有一行图像，我想从页面的右侧溢出，并允许显示溢出的图像和水平滚动。我不希望整个页面水平滚动，只是该元素。
It's relatively easy to get the horizontal scrolling to work, but I can't get the overflow images to show without also increasing the width of the entire page (and, hence, making the page horizontally scroll).
让水平滚动工作相对容易，但我无法在不增加整个页面宽度的情况下显示溢出图像（因此，使页面水平滚动）。
My CSS:
我的CSS：
container{
width:960px;
margin: 0 auto;
}
.pic-container {
white-space:nowrap;
overflow:scroll;
}
My (simplified) HTML:
我的（简化的）HTML：
<body>
<container>
<div class="pic-container">
<div class="pic-row">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</div>
</container>
</body>
Here's a little diagram of what I'm looking for:
这是我正在寻找的一个小图表：
回答by jamesplease
This might do what you're looking for (see on JSFiddle here):
这可能会满足您的要求（请参阅此处的 JSFiddle）：
<section>
<div class="pic-container">
<div class="pic-row">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</div>
</section>?
CSS:
CSS：
body {
overflow: hidden;
}
section {
/* The width of your document, I suppose */
width:600px;
margin: 0 auto;
white-space:nowrap;
overflow: scroll;
}
.pic-container {
/* As large as it needs to be */
width: 1500px;
}?
What we do is hide the overflow of the body, which prevents the horizontal scrollbars, even if the page isn't wide enough to show everything. Then you make it show the scrollbars on the container div, with a set width (presumably, the width of your document) and make the content within that divas wide as you want.
我们所做的是隐藏 的溢出body，这可以防止水平滚动条，即使页面不够宽以显示所有内容。然后你让它在容器上显示滚动条div，设置宽度（大概是你的文档的宽度），并使里面的内容div与你想要的一样宽。
Another implementation, which just sets the width of the sectioninstead of the body, can be viewed here.
另一个实现，它只是设置宽度section而不是body，可以在这里查看。
回答by Matt Martin
I couldn't figure out a way to do this with just html + css so I leaned on JQuery. This actually works perfectly, and it degrades nicely too — if there's no javascript, the images are still scrollable, they just don't bleed into the right margin (the '.pic-container' div by default has no width until the js adds it in).
我想不出只用 html + css 来做到这一点的方法，所以我依靠 JQuery。这实际上工作得很好，它也很好地降级 - 如果没有 javascript，图像仍然可以滚动，它们只是不会渗入右边距（默认情况下，'.pic-container' div 没有宽度，直到 js 添加它在）。
// Update pic-container width
function picWidth() {
win = $(document).width();
width = String( Math.round(((win-960)/2) + 960) );
$('.pic-container').css({'width' : width});
}
$(window).resize(picWidth);
picWidth();
