猿问

如何重新创建 Facebook 图像模式？

我想创建几乎与 Facebook 图像模式完全相同的东西，其中图像在用户滚动评论时是固定的。我弄乱了不同的方式来应用overflow: hidden到一个 div 和overflow: scroll另一个。我什至考虑将其应用于他们的父母。这是我尝试过的代码：


<div class="row container border border-primary">

  <div class="image col border">

    Image

  </div>

  <div class="text-section col border">

    Comments

  </div>

</div>


div.image {

  height: 300px;

  overflow: hidden;

}


div.text-section {

  height: 1000px;

  overflow: scroll;

}


div.container {

  height: 300px;

}


犯罪嫌疑人X
浏览 95回答 2
2回答

回首忆惘然

我没有 facebook，所以无法查看行为，但您可以放在position: sticky;图像容器上，这样可以将其保持在适当的位置。这也取决于你的浏览器支持，比如 ie11不支持，但还有更多方法可以做到这一点。如果您需要更多跨浏览器解决方案，请告诉我。.container {&nbsp; max-height: 600px;&nbsp; height: 100%;&nbsp; overflow: auto;&nbsp; position: relative;}div.image {&nbsp; height: 300px;&nbsp; background-color: deepskyblue;&nbsp; position: sticky;&nbsp; top: 0;}div.text-section {&nbsp; height: 1000px;&nbsp; background-color: aqua;}<div class="row container border border-primary">&nbsp; <div class="image col border">&nbsp; &nbsp; Image&nbsp; </div>&nbsp; <div class="text-section col border">&nbsp; &nbsp; Comments&nbsp; </div></div>
0

HUX布斯

我想像这样的代码。蓝色（图像）保持固定在左侧，而您可以滚动右侧的绿色部分（评论）<!DOCTYPE html><html><head>&nbsp; &nbsp;<meta charset="UTF-8">&nbsp; &nbsp;<style>&nbsp; &nbsp; &nbsp; #container { background: red; width: 400px; height: 150px; display: flex; }&nbsp; &nbsp; &nbsp; #image&nbsp; &nbsp; &nbsp;{ background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }&nbsp; &nbsp; &nbsp; #comments&nbsp; { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }&nbsp; &nbsp;</style></head><body>&nbsp; &nbsp;<div id="container">&nbsp; &nbsp; &nbsp; <div id="image"></div>&nbsp; &nbsp; &nbsp; <div id="comments">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h3 style="color: red;">Comments</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Nice!</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Good!</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Wonderful</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Bah...</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Strange</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Nice again</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Amazing</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Beautiful</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Great</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>I don’t like it</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Yes, nice</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Super</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Normal</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Ok...</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Nice</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Bah</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Great</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Nice</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>I like it</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Normal</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;</div></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答