Как заново создать модальное изображение Facebook? - PullRequest
Новая
       11

Как заново создать модальное изображение Facebook?

1 голос
/ 23 марта 2020

Я хочу создать нечто почти такое же, как модальное изображение 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;
}

Plunkr

Ответы [ 2 ]

2 голосов
/ 23 марта 2020

Я предположил код, подобный этому. Синий (изображение) остается фиксированным слева, в то время как вы можете прокрутить зеленый раздел (комментарии) справа 

<!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>
0 голосов
/ 23 марта 2020

У меня нет фейсбука, поэтому я не могу посмотреть на поведение, но вы можете поместить position: sticky; в контейнер изображений, который будет держать его на месте. Это также зависит от поддержки вашего браузера, например ie11 не поддерживает , но есть и другие способы сделать это. Дайте мне знать, если вам нужно более кросс-браузерное решение. 

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