0

На странице появляется блок div, и чтобы он появлялся в любом участке длинной страницы, ему придали позицию fixed. Высота этого блока может быть разная, в зависимости от просматриваемого текстового контента, и если блок выходит за экран, его уже не прокрутить, прокручивается только основная страница.

Какие параметры задать, чтобы получить обратный эффект: прокручивать вплывающий div блок, а основная страница чтобы стояла на месте? Сам блок появляется с помощью Js, при клике на определённые участки ему придаётся значение display:block, по умолчанию: none.

1
  • без примера ничего не понятно
    – yolosora
    2 авг 2018 в 11:35

2 ответа 2

1

.a{
    top: 100px;
    left: 100px;
    position: fixed;
    background: green;
    width: 600px;
    height: 200px;
    overflow: scroll;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Online store</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="descritpion" content="Online store on sale of electronics">
    <link rel="stylesheet" href="css/main.css">

</head>

<body>
    <div class="a">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae eligendi fugiat sint dolor laborum magni dicta nesciunt tempora cupiditate perferendis sed in voluptates voluptatibus harum assumenda perspiciatis aut aperiam, natus, rem itaque quisquam. Animi pariatur distinctio dignissimos, incidunt nisi qui dolores laudantium corrupti iusto tempore laboriosam autem error quasi, voluptatem iure! Cupiditate exercitationem, consectetur minus! Quae repellendus, quibusdam odit aliquam veritatis fugit vitae. Nesciunt in tenetur, pariatur, rem non nobis, voluptates quae, quibusdam blanditiis est quas maiores. Nesciunt voluptas voluptates est temporibus, unde odit. Architecto ex accusantium illo totam veritatis iusto dolorum error, cumque deserunt delectus, ducimus voluptas voluptate quis hic quae laboriosam sit fugit veniam dolor facilis ab necessitatibus repellendus. Ratione asperiores, rem maxime ipsum totam laboriosam odio praesentium sapiente eius, reiciendis saepe a quasi quisquam modi, provident qui possimus, repellendus nihil eligendi non? Error facilis itaque reiciendis qui aspernatur, consectetur soluta voluptatibus iure, quis modi, perspiciatis natus omnis. Quibusdam explicabo similique rerum neque dolore tempora temporibus alias culpa voluptas, perspiciatis, asperiores distinctio tenetur quidem eveniet molestiae? Ullam fugit deleniti dolor aliquid error voluptas repellat consequuntur reiciendis dolores tenetur distinctio, enim, cum labore laborum repellendus beatae autem consequatur sunt officia quaerat nihil perferendis, dolorem minima tempora! Nihil, rerum?</p>
    </div>
</body>

</html>

Так?

2
  • Когда писал вопрос, думал отметить что overflow: scroll; не работает, но не стал. Всё-таки надо было. Полосу прокрутки браузер пририсовывает, но она не работает. 2 авг 2018 в 11:24
  • В итоге она как-то заработала. Надо было к оболочке контента задать position:absolute; А к body можно добавить verflow:hidden; 2 авг 2018 в 16:19
0

добавьте фиксированному контейнеру, внутри которого длинный текст

max-height: 100vh;
overflow-y: auto;

таким образом контейнер будет иметь что-то вроде

.popup-block {
    position: fixed;
    width: 100%;
    z-index: 1000;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

Ваш ответ

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

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