A div block appears on the page, and so that it appears in any part of the long page, it is given the position fixed. The height of this block can be different, depending on the text content being viewed, and if the block goes beyond the screen, it can no longer be scrolled, only the main page is scrolled.

What parameters to set to get the opposite effect: scroll the inf block div block, and the main page to stand still? The block itself appears with the help of Js, when clicking on certain areas, it is given the value of display:block , by default: none .

  • nothing is clear without an example - yolosora

1 answer 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>

So?

  • When writing a question, I thought to note that overflow: scroll; does not work, but did not. Still, it was necessary. The browser draws a scroll bar, but it does not work. - Swift
  • In the end, she somehow earned. It was necessary to set the content shell to position:absolute; And you can add verflow:hidden to the body; - The swift