Задать вопрос
  • Как сделать скролл диалога как в вк?

    lazalu68
    @lazalu68
    Salmon
    Если лень читать - пример

    То есть вы хотите сделать так, чтобы при прокрутке скроллился только блок диалогов, да?

    Если я правильно понял вопрос, то скажите, что значит ваша фраза "Кроме перекрытия блока другим блоком через fixed"? Эдак не получится) Потому что визуальная часть vk.com именно с использованием fixed и устроена: есть основной блок фиксированной ширины, внутри него блок контента, который слева и сверху сжат одним блоком sidebar и несколькими header блоками. Поведение этих блоков регулируется классом .im_fixed_nav, который вешается на элемент body: на обычных страницах, например странице пользователя, контент прокручивается вместе с сайдбаром и хэдером, ибо эти блоки имеют по дефолту свойство position: relative;, а на странице диалогов прокручивается только контент, потому что блоки sidebar и header получают position: fixed;. Вот правило, которое за это отвечает:

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


    Вообще, структура DOM у vk.com довольно запутанная, но если упростить, выглядит она так:

    body
    
    	div.scroll-fix-wrap
    
    		div.scroll-fix
    
    			div.page-layout {
    
    				div.header
    
    				div.sidebar 
    
    				div.content
    
    			}


    Названия блоков мною выбраны так, чтобы наиболее доступно показать как именно реализован scroll-fix. Некоторые названия блоков, которые я здесь использую, действительно используются vk.com, но не все, поэтому не ищите 100%-го совпадения.

    Тут я набросал скелетик vk.com, который показывает, как это все происходит, как структуру так и переключение между режимами скролла. Там найдете ответ на свой вопрос.

    На сайте вконтакте размеры большинства основных блоков задаются динамически, например считаются onscroll; в моем примере все не так круто, никакого динамического подсчета нету, но я честно разделил указания размеров так же, как на vk.com: статические - указаны в css, динамические - в html, индвидиуально для каждого элемента, который нуждается в динамическом пересчете размера.
    Ответ написан
    2 комментария