2

Появилась необходимость сделать прокрутку на странице, все блоки фиксированные, кроме сообщений которые должны прокручиваться внутри фиксированного( а прокрутка главная)
Пример где такое есть, вк надо подобное.... внутри фиксированной страницы выводить обычные блоки, но при этом они не должны выползать за пределы блока (на скрине красная рамка)

введите сюда описание изображения

4
  • Если без скриптов, то только блоками накрывать, если со скриптами, то повторять scrollTop.
    – Qwertiy
    15 окт 2018 в 14:35
  • 1
    я открыл vk и там нету фиксированных панелей кроме header ....но попытку всё же покажу : codepen.io/topicstarter/pen/bmYomN --так надо ? 15 окт 2018 в 15:51
  • Если вы конкретно про сообщения ВК, то там прокрутка внутри блока (с сообщениями), воооот.
    – De.Minov
    15 окт 2018 в 15:59
  • Никита, хорошая идея, но еще бы блок сверху под который оно заползало бы :D 15 окт 2018 в 16:37

2 ответа 2

2

Так хотели?

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  --offset: 1em;
}

header,
footer {
  width: 100%;
  height: var(--offset);
  position: fixed;
  background-color: grey;
  z-index: 100;
  left: 0;
}

header {
  top: 0;
}

footer {
  bottom: 0;
}

.wrapper {
  min-width: 320px;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.left {
  flex: 0 0 160px;
  height: 160px;
  background-color: darkcyan;
  position: sticky;
  left: 0;
  top: var(--offset);
}

.right {
  flex: 0 0 160px;
  height: 120px;
  background-color: darkcyan;
  position: sticky;
  right: 0;
  top: var(--offset);
}

.main {
  padding: var(--offset) 0;
}
<header></header>
<div class="wrapper">
  <div class="left"></div>
  <div class="main">
    <div class="item">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis voluptatum enim mollitia perferendis aliquam repudiandae officia itaque iste laborum quas laudantium modi nihil numquam unde omnis, facere veniam earum qui saepe. Repellat, tempore doloribus
      dolorem ducimus distinctio consequuntur eligendi pariatur.
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis pariatur, quasi aut accusantium sequi architecto placeat dolores at deserunt, animi est vero excepturi, fugiat facere. Hic veniam inventore magnam minus.
    </div>
    <div class="item">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla, rerum accusantium? Quis doloribus animi quisquam vero ea nobis voluptatum nostrum, accusamus commodi sint nam in?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident numquam magnam error earum pariatur minima. Sit delectus veritatis aliquid nam? Eius, perspiciatis dolor adipisci necessitatibus debitis obcaecati enim ad commodi voluptas maiores voluptatem,
      dignissimos aliquid asperiores rem neque unde repellendus esse tenetur vel delectus numquam fugiat autem quis recusandae. Incidunt!
    </div>
    <div class="item">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore illo sed ratione neque cum dolorem reiciendis dicta provident velit molestiae, quasi deleniti, officia perferendis architecto repellendus vitae totam quaerat, ab nesciunt eius at dolor
      explicabo laboriosam inventore! Officiis, magni eius.
    </div>
    <div class="item">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur qui maxime neque, alias natus est eveniet, rerum culpa reprehenderit ab nemo atque ipsa totam, nobis veniam modi beatae recusandae quam.
    </div>
    <div class="item">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error consequatur nam est voluptatibus deserunt tempore totam autem, voluptate minima iure id ex fugit officia laudantium. Impedit fugiat quod velit necessitatibus magni! Accusamus, aperiam cupiditate
      quos vel ea ex incidunt nesciunt eos, sed pariatur laudantium dignissimos animi quis, tempora ipsa architecto.
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vel culpa facere maiores est facilis dicta nesciunt omnis. Laboriosam nihil sequi, cum, numquam iure qui unde voluptatem voluptate magnam nesciunt, in ipsum aperiam modi quisquam velit harum
      atque exercitationem consequatur.
    </div>
    <div class="item">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi labore sapiente molestias modi aliquam ab necessitatibus similique ducimus vero dolore. Ullam nemo maxime illum ipsam? Dolores voluptatem accusantium sequi numquam!
    </div>
    <div class="item">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, suscipit doloribus. Laudantium adipisci quam deserunt laborum nesciunt, facere dolore iusto nisi harum sunt debitis unde quidem magnam, architecto doloribus tempora ad quibusdam soluta
      ipsum illum. Deserunt aliquid maxime culpa non!
    </div>
  </div>
  <div class="right"></div>
</div>
<footer></footer>

6
  • сверху и снизу еще должны быть блоки, а тут выходит просто в краях они 15 окт 2018 в 16:35
  • @ДенисЛебедев Они должны тоже скролится или быть отдельно от скрола? 15 окт 2018 в 16:39
  • Скорректировал код. 15 окт 2018 в 16:48
  • Я задумываюсь над Js вариантом с проверкой основного скролла 15 окт 2018 в 16:50
  • Ну, вероятно все равно придется для position: sticky использовать полифилы, т.ч. можно и на js решить. 15 окт 2018 в 16:53
0

*{
  margin:0;
  padding:0;
}
html,body{
  min-height:100%;
  padding-bottom:20px;
  overflow:hidden;
}
.left{
  width:250px;
  height:100vh;
  background:#fbfbfb;
  position: fixed;
  top:0;
  left:0;
}

.right{
  width:250px;
  height:100vh;
  background:#cff;
  position: fixed;
  right:0;
  top:0;
}
.content{
  width:calc(100% - 550px);
  height:100vh;
  background:#fff;
  margin:auto;
  overflow-y: scroll;
}
.item{
  width:90%;
  margin:30px auto;
  padding:20px;
}
.item:first-child{
  margin-top:0px;
}
.footer{
  width:calc(100% - 550px);
  background:gray;
  margin:auto;  
  height:50px;
  position: fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
}
<div class="left"></div>
<div class="right"></div>
<div class="content">
  <div class="item">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis voluptatum enim mollitia perferendis aliquam repudiandae officia itaque iste laborum quas laudantium modi nihil numquam unde omnis, facere veniam earum qui saepe. Repellat, tempore doloribus dolorem ducimus distinctio consequuntur eligendi pariatur.
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis pariatur, quasi aut accusantium sequi architecto placeat dolores at deserunt, animi est vero excepturi, fugiat facere. Hic veniam inventore magnam minus.
  </div>
  <div class="item">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla, rerum accusantium? Quis doloribus animi quisquam vero ea nobis voluptatum nostrum, accusamus commodi sint nam in?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident numquam magnam error earum pariatur minima. Sit delectus veritatis aliquid nam? Eius, perspiciatis dolor adipisci necessitatibus debitis obcaecati enim ad commodi voluptas maiores voluptatem, dignissimos aliquid asperiores rem neque unde repellendus esse tenetur vel delectus numquam fugiat autem quis recusandae. Incidunt!
  </div>
  <div class="item">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore illo sed ratione neque cum dolorem reiciendis dicta provident velit molestiae, quasi deleniti, officia perferendis architecto repellendus vitae totam quaerat, ab nesciunt eius at dolor explicabo laboriosam inventore! Officiis, magni eius.
  </div>
  <div class="item">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur qui maxime neque, alias natus est eveniet, rerum culpa reprehenderit ab nemo atque ipsa totam, nobis veniam modi beatae recusandae quam.
  </div>
  <div class="item">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error consequatur nam est voluptatibus deserunt tempore totam autem, voluptate minima iure id ex fugit officia laudantium. Impedit fugiat quod velit necessitatibus magni! Accusamus, aperiam cupiditate quos vel ea ex incidunt nesciunt eos, sed pariatur laudantium dignissimos animi quis, tempora ipsa architecto.
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vel culpa facere maiores est facilis dicta nesciunt omnis. Laboriosam nihil sequi, cum, numquam iure qui unde voluptatem voluptate magnam nesciunt, in ipsum aperiam modi quisquam velit harum atque exercitationem consequatur.
  </div>
  <div class="item">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi labore sapiente molestias modi aliquam ab necessitatibus similique ducimus vero dolore. Ullam nemo maxime illum ipsam? Dolores voluptatem accusantium sequi numquam!
  </div>
  <div class="item">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, suscipit doloribus. Laudantium adipisci quam deserunt laborum nesciunt, facere dolore iusto nisi harum sunt debitis unde quidem magnam, architecto doloribus tempora ad quibusdam soluta ipsum illum. Deserunt aliquid maxime culpa non!
  </div>
</div>
<div class="footer"></div>

Предлагаю такой вариант. Разверните код на всю страницу, чтобы увидеть полную картину, согласно вашему коду.

7
  • свой вариант не смогли написать ? 15 окт 2018 в 16:46
  • @НикитаФаст Зачем? если можно изменить уже существующий код. Просили сделать прокрутку сообщений, я сделал. 15 окт 2018 в 16:49
  • Подумал подрубить на Js сделать, скайнерить скрол главный, и прокручивать div 15 окт 2018 в 16:49
  • @ДенисЛебедев если у клиента будет отключен в браузере JS. То Ваш скрол работать не будет. Но шанс такого, очень мал 15 окт 2018 в 16:51
  • @ЕвгенийНиколаев вы код взяли с моей песочницы что вы там сделали ? 15 окт 2018 в 22:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.