How to make a dialogue scroll like in VK?

Question

css

How to make a dialogue scroll like in VK?
Scroll the dialog so that it is displayed as the main one, and not inside the blog posts.
In addition to overlapping a block with another block via fixed

Answer 1

If you are too lazy to read - an example , and only the content scrolls on the dialog page, because the sidebar and header blocks receive . Here is the rule for this:
That is, you want to make it so that only the dialog block scrolls when scrolling, right?
If I understood the question correctly, then tell me what your phrase "Except for overlapping a block with another block through fixed" means? That won't work) Because the visual part of vk.com is designed using fixed: there is a main block of fixed width, inside it is a content block, which is compressed from the left and top by one sidebar block and several header blocks. The behavior of these blocks is regulated by the class .im_fixed_nav, which is hung on the body element: on normal pages, for example, the user's page, the content scrolls along with the sidebar and header, because these blocks have the default propertyposition: relative;position: fixed;

.im_fixed_nav #page_header, .im_fixed_nav #side_bar {
    position: fixed;
}

In general, the DOM structure of vk.com is quite confusing, but to simplify, it looks like this:

body

  div.scroll-fix-wrap

    div.scroll-fix

      div.page-layout {

        div.header

        div.sidebar 

        div.content

      }

I have chosen the names of the blocks in such a way as to show how the scroll-fix is ​​implemented in the most accessible way. Some of the block names I use here are actually used by vk.com, but not all of them, so don't look for 100% matches.
Here I sketched a vk.com skeleton that shows how it all happens, both the structure and switching between scroll modes. There you will find the answer to your question.
On the VKontakte website, the sizes of most of the main blocks are set dynamically, for example, onscroll are considered; in my example, everything is not so cool, there is no dynamic calculation, but I honestly separated the size indications the same way as on vk.com: static - indicated in css, dynamic - in html, individually for each element that needs dynamic recalculation of the size .

Answer 2

Using https://github.com/flesler/jquery.scrollTo
We accept an element and scroll to it.