Появилась необходимость сделать прокрутку на странице, все блоки фиксированные, кроме сообщений которые должны прокручиваться внутри фиксированного( а прокрутка главная)
Пример где такое есть, вк надо подобное.... внутри фиксированной страницы выводить обычные блоки, но при этом они не должны выползать за пределы блока (на скрине красная рамка)
-
Если без скриптов, то только блоками накрывать, если со скриптами, то повторять scrollTop.– Qwertiy ♦15 окт 2018 в 14:35
-
1я открыл vk и там нету фиксированных панелей кроме header ....но попытку всё же покажу : codepen.io/topicstarter/pen/bmYomN --так надо ?– Никита Фаст15 окт 2018 в 15:51
-
Если вы конкретно про сообщения ВК, то там прокрутка внутри блока (с сообщениями), воооот.– De.Minov15 окт 2018 в 15:59
-
Никита, хорошая идея, но еще бы блок сверху под который оно заползало бы :D– Денис Лебедев15 окт 2018 в 16:37
Добавить комментарий
|
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>
-
сверху и снизу еще должны быть блоки, а тут выходит просто в краях они 15 окт 2018 в 16:35
-
@ДенисЛебедев Они должны тоже скролится или быть отдельно от скрола? 15 окт 2018 в 16:39
-
-
-
Ну, вероятно все равно придется для
position: sticky
использовать полифилы, т.ч. можно и на js решить. 15 окт 2018 в 16:53
*{
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>
Предлагаю такой вариант. Разверните код на всю страницу, чтобы увидеть полную картину, согласно вашему коду.
-
-
@НикитаФаст Зачем? если можно изменить уже существующий код. Просили сделать прокрутку сообщений, я сделал. 15 окт 2018 в 16:49
-
Подумал подрубить на Js сделать, скайнерить скрол главный, и прокручивать div 15 окт 2018 в 16:49
-
@ДенисЛебедев если у клиента будет отключен в браузере JS. То Ваш скрол работать не будет. Но шанс такого, очень мал 15 окт 2018 в 16:51
-
@ЕвгенийНиколаев вы код взяли с моей песочницы что вы там сделали ? 15 окт 2018 в 22:33