我如何只允许水平滚动一行图像并显示溢出，而不水平滚动页面的其余部分？ [英] How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?
问题描述
我有一个960像素宽的网页，我有一排图像，我想从页面的右侧溢出，并允许显示溢出的图像并水平滚动。我不希望整个页面水平滚动，只是该元素。
水平滚动工作相对容易，但我无法获得溢出图像显示，而不增加整个页面的宽度（因此，使页面水平滚动）。
我的CSS：
container {
width：960px;
margin：0 auto;
}
.pic-container {
white-space：nowrap;
overflow：scroll;
$ / code> 我的（简体）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>
以下是我正在寻找的一张图：
我无法找到一种方法来做到这一点只是HTML + CSS，所以我倾向于JQuery。这实际上完美地工作，它也很好地降解 - 如果没有JavaScript，图像仍然可滚动，它们只是不会流入右边距（默认情况下'.pic-container'div没有宽度，直到js添加（））。
pre $ //更新pic容器宽度
函数picWidth（）{
win = （文档）$ .WIDTH（）;
width = String（Math.round（（（win-960）/ 2）+ 960））;
$（'。pic-container'）。css（{'width'：width}）;
}
$（window）.resize（picWidth）;
picWidth（）;
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.
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:
container{
width:960px;
margin: 0 auto;
}
.pic-container {
white-space:nowrap;
overflow:scroll;
}
My (simplified) 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:
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).
// 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();
这篇关于我如何只允许水平滚动一行图像并显示溢出，而不水平滚动页面的其余部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
