Question

An overflow-x, overflow-y pen by CSS Tricks 嘿，有人知道怎样才能在这个CSS中制作图像（请使用Codepen链接）溢出框，而overflow-y：scroll仍然应用？

<div class="box">
  <img src="http://placehold.it/450x150" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Recusandae suscipit, autem magnam ab. Possimus perferendis 
    officiis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Recusandae suscipit, autem magnam ab. Possimus perferendis 
    officiis doloremque impedit quia quos labore optio quas cum 
    incidunt.Blanditiis dicta, sunt numquam quos.
  </p>
</div>

.box {
   border: 1px solid #222;
   width: 300px;
   height: 300px;
   overflow-y: scroll;
   overflow-x: hidden;
}

Answer 1

这是你可以做到的一种方式，虽然这是一个非常hacky。我在图像上放了position:absolute，这使得它忽略了溢出属性。然后我添加了一个占位符，它将覆盖图像所覆盖的空间，因此文本不会被推到图像所在的位置。

.box {
  border: 1px solid #222;
  width: 300px;
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
}

img {
  position: absolute;
  top: 0;
}

.placeholder {
  display: block;
  height: 150px;
  width: 450px;
}

<div class="box">
  <div class="placeholder"></div>
  <img src="http://placehold.it/450x150" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
</div>

修改我刚注意到，在您的codepen中有一个overflow-x: scroll;，而在问题本身中它显示为overflow-y: scroll;。你能说明你的意思吗？如果我理解正确的话你能告诉我吗？

编辑2：我更正了我的代码段以适应问题。

编辑3：如果可能，我建议将图像从容器中取出。这使得滚动条可见，也不需要任何占位符或任何类型的附加包装：

.box {
  border: 1px solid #222;
  width: 300px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.placeholder {
  display: block;
  height: 150px;
  width: 450px;
}

  <img src="http://placehold.it/450x150" alt="" />
  <div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
</div>

在文本滚动条仍然存在时使图像溢出

1 个答案: