如何只允许水平滚动一行图像并显示溢出，而不水平滚动页面的其余部分？答案

【问题标题】：How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?如何只允许水平滚动一行图像并显示溢出，而不水平滚动页面的其余部分？
【发布时间】：2012-10-30 20:13:27
【问题描述】：

我有一个 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>

这是我正在寻找的小图表：

【问题讨论】：

你愿意使用javascript吗？有很多插件可以做到这一点，而且没有滚动条看起来会更好。
这是一个Jquery 解决方案that might do what you want。 And here's another。但听起来您希望图像的边界框无限扩展，并带有一个小滚动条，可以滑动其中的内容......所以我认为这些都不符合条件。
完全愿意使用 javascript，但不幸的是 jmeas，这些都不是我想要的。
也许我只需要查询窗口大小并更改 pic-row div 的宽度以匹配它。但这似乎效率很低……

标签： html css scroll overflow

【解决方案1】：

这可能会满足您的需求 (see on JSFiddle here)：

<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、can be viewed here。

【讨论】：

关闭，但您的解决方案只能让我达到我已有的水平。也就是说，溢出的图像在容器的宽度之外仍然不可见。我希望溢出图像可见，而不会弄乱页面的宽度。这有意义吗？
嗯……也许吧。你想滚动吗？如果你让溢出的图像在容器宽度之外可见，那么这似乎与让你看到它们的滚动条不兼容。
还是您正在寻找图像的位置，这些图像始终可见，可以左右滚动？
第二个。它本质上是对将要进入视口的内容的预览......有点。我希望我能在网上的某个地方找到一个很好的例子；我知道我以前见过。如果需要，使用 jquery 也没有问题。
有趣的事实，这仅在我删除图像上的 float:left 并将它们显示为内联块时才对我有用。

【解决方案2】：

我想不出只使用 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();

【讨论】：