How to re-create Facebook image modal?

user_3769526 0
Viewed 147

I want to create something almost exactly like the Facebook image modal wherein the image is fixed while a user scrolls through the comments. I am messing with different ways to apply overflow: hidden to one div and overflow: scroll to the other. I even looked into applying it to their parent. Here is the code I've tried:

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

Plunkr

layout css html javascript
2 Answers

I supposed a code like this. The blue (image) remains fixed on the left, while you can scroll the green section (comments) on the right

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <style>
      #container { background: red; width: 400px; height: 150px; display: flex; }
      #image     { 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; }
      #comments  { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
   </style>
</head>

<body>
   <div id="container">
      <div id="image"></div>
      <div id="comments">
         <h3 style="color: red;">Comments</h3>
         <p>Nice!</p>
         <p>Good!</p>
         <p>Wonderful</p>
         <p>Bah...</p>
         <p>Strange</p>
         <p>Nice again</p>
         <p>Amazing</p>
         <p>Beautiful</p>
         <p>Great</p>
         <p>I don’t like it</p>
         <p>Yes, nice</p>
         <p>Super</p>
         <p>Normal</p>
         <p>Ok...</p>
         <p>Nice</p>
         <p>Bah</p>
         <p>Great</p>
         <p>Nice</p>
         <p>I like it</p>
         <p>Normal</p>
      </div>
   </div>

</body>
</html>

user_39180950

I don't have facebook so cant look at the behaviour, but you could put position: sticky; on the image container, that will keep it in place. It also depends on your browser support, like ie11 does not support it, but there are more ways to do this. Let me know if you need a more cross browser solution.

.container {
  max-height: 600px;
  height: 100%;
  overflow: auto;
  position: relative;
}

div.image {
  height: 300px;
  background-color: deepskyblue;
  position: sticky;
  top: 0;
}

div.text-section {
  height: 1000px;
  background-color: aqua;
}
<div class="row container border border-primary">
  <div class="image col border">
    Image
  </div>
  <div class="text-section col border">
    Comments
  </div>
</div>

user_1486010
Related