Html 如何允许仅对一行图像进行水平滚动并显示溢出，而不水平滚动页面的其余部分？_Html_Css_Scroll_Overflow

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

html css scroll

Html 如何允许仅对一行图像进行水平滚动并显示溢出，而不水平滚动页面的其余部分？,html,css,scroll,overflow,Html,Css,Scroll,Overflow,我有一个960px宽的页面，我有一行图像，我想从页面右侧溢出，允许显示溢出的图像和水平滚动。我不希望页面作为一个整体水平滚动，只希望该元素让水平滚动工作起来相对容易，但是如果不增加整个页面的宽度（从而使页面水平滚动），我就无法显示溢出图像我的CSS： container{ width:960px; margin: 0 auto; } .pic-container { white-space:nowrap; overflow:scroll; } 我的（简化）HTM

我有一个960px宽的页面，我有一行图像，我想从页面右侧溢出，允许显示溢出的图像和水平滚动。我不希望页面作为一个整体水平滚动，只希望该元素

让水平滚动工作起来相对容易，但是如果不增加整个页面的宽度（从而使页面水平滚动），我就无法显示溢出图像

我的CSS：

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

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

我的（简化）HTML：

下面是我要找的东西的一个小图表：

这可能会满足您的需求（）：

我们要做的是隐藏

正文的溢出，这会阻止水平滚动条，即使页面不够宽，无法显示所有内容。然后让它以设定的宽度（大概是文档的宽度）显示容器div
上的滚动条，并使div
中的内容尽可能宽
另一个实现，它只设置部分的宽度，而不是正文的宽度。
这可能会满足您的要求（）：
我们要做的是隐藏正文的溢出，这会阻止水平滚动条，即使页面不够宽，无法显示所有内容。然后让它以设定的宽度（大概是文档的宽度）显示容器div
上的滚动条，并使div
中的内容尽可能宽
另一个实现，它只是设置部分的宽度，而不是主体的宽度。
我想不出用html+css来实现这一点的方法，所以我选择了JQuery。这实际上工作得很好，而且性能也很好-如果没有javascript，图像仍然可以滚动，它们只是不会进入右边距（默认情况下，.pic container”div在js添加它之前没有宽度）
我想不出一种只用html+css就能做到这一点的方法，所以我选择了JQuery。这实际上工作得很好，而且性能也很好-如果没有javascript，图像仍然可以滚动，它们只是不会进入右边距（默认情况下，.pic container”div在js添加它之前没有宽度）
你愿意使用javascript吗？有很多插件都能做到这一点，如果没有滚动条，它看起来会更好。但听起来你希望图像的边界框无限扩展，用一个小滚动条来滑动它的内容…所以我认为这两个都不合格。完全愿意使用javascript，但不幸的是jmeas，这两个都不是我想要的。也许我只需要查询窗口大小并更改pic row div的宽度来匹配它。但这看起来效率很低……你愿意使用javascript吗？有很多插件都能做到这一点，如果没有滚动条，它看起来会更好。但听起来你希望图像的边界框无限扩展，用一个小滚动条来滑动它的内容…所以我认为这两个都不合格。完全愿意使用javascript，但不幸的是jmeas，这两个都不是我想要的。也许我只需要查询窗口大小并更改pic row div的宽度来匹配它。但这看起来确实很低效…很接近，但你的解决方案只能让我达到我已经拥有的程度。也就是说，溢出图像在容器宽度之外仍然不可见。我希望溢出的图像是可见的，而不会弄乱页面的宽度。这有什么意义吗？嗯……也许吧。你想要滚动吗？如果您使溢出图像在容器宽度之外可见，那么这似乎与使用滚动条让您查看所有图像不兼容。或者是因为您正在查找图像的位置（这些图像始终可见），以便向左和向右滚动？第二个。它本质上是将进入视口的内容的预览。。。有点我希望我能在网上找到一个好的例子；我知道我以前见过。使用jquery也没有问题，如果需要的话。有趣的是，这只在我删除图像上的float:left并将其显示为inline-block.Close时对我有效，但您的解决方案只能让我了解到我已经拥有的。也就是说，溢出图像在容器宽度之外仍然不可见。我希望溢出的图像是可见的，而不会弄乱页面的宽度。这有什么意义吗？嗯……也许吧。你想要滚动吗？如果您使溢出图像在容器宽度之外可见，那么这似乎与使用滚动条让您查看所有图像不兼容。或者是因为您正在查找图像的位置（这些图像始终可见），以便向左和向右滚动？第二个。它本质上是将进入视口的内容的预览。。。有点我希望我能在网上找到一个好的例子；我知道我以前见过。如果需要的话，使用jquery也没有问题。有趣的是，这只在我删除图像上的float:left并将其显示为内联块时才对我有效。
<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>

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

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

// 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();