如何允许水平滚动只图像和显示溢出的一排，没有水平滚动页面的休息吗？(How do I allow h

我有一个机构，是960像素宽的网页，我有我想要溢出页面右侧的出图像的行，并允许溢出图像的显示和水平滚动。我不想让页面的整体水平滚动，只是元素。

这是比较容易得到的水平滚动工作，但我无法得到溢出的图像显示没有提高整个页面的宽度（和，因此，使页面水平滚动）。

我的CSS：

container{
  width:960px;
  margin: 0 auto;
  }

.pic-container {
  white-space:nowrap; 
  overflow:scroll;
  }

我（简体）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>

这里是什么，我正在寻找一个小图：

Answer 1:

这可能做你要找的内容（见的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：

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;
}

我们做的是隐藏的溢出body ，防止水平滚动条，即使页面不够宽，无法显示的一切。然后你把它显示在容器中的滚动条div ，一组宽度（大概是，你的文档的宽度），并在内容内的div宽，只要你想。

另一种实现方式，其中只设置的宽度section ，而不是body ，在这里可以查看。

Answer 2:

我无法想出一个办法，只用HTML + CSS所以我靠在jQuery来做到这一点。这实际上完美的作品，它很好地降低太多 - 如果没有JavaScript中，图像仍然是滚动的，他们只是不渗到右边距（默认情况下，“.PIC容器” 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();

文章来源: How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?