@recloudor

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

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

Скролл диалога чтобы отображался как главный, а не внутри блога сообщений.

Кроме перекрытия блока другим блоком через fixed
  • Вопрос задан
  • 2093 просмотра
Решения вопроса 1
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, индвидиуально для каждого элемента, который нуждается в динамическом пересчете размера.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы