В ВК желаемый эффект при скролле достигается за счет неслабого js-кода, и оперирования с position: fixed/absolute и отступами у блоков. Минусов у такого решения хватает:
- При горизонтальном скроллинге блоки перемещаются рывками;
- Не самая лучшая производительность из-за привязки js-кода к событию on scroll ;
- Нюансы на touch устройствах, в корректном отлове on scroll события и в позиционировании блоков.
С другой же стороны — какая у вас конечная цель? Сделать некоторые блоки приклеивающимися к экрану при скроллинге.
И для этого есть элементарный в использовании, стабильный и браузерно-ускоренный способ: position: sticky; .
- С ним вам не потребуется писать js-код, совсем;
- Это свойство поддерживают современные браузеры;
- В IE, Edge и Android Browser — блоки просто не будут приклеиваться, верстка никак не поедет и не выйдет из строя;
- В крайнем случае для решения пункта 3 есть полифилл;
- Отлично работает с горизонтальным скроллингом;
- Отлично работает на touch устройствах.
Единственное НО — блоки не будут так эффектно замирать и скроллиться вверх при обратном скроллинге. Но — плюсы position: sticky , по моему мнению, перевешивают этот единственный минус.
Как получить много рулонов paper scroll вк
Источник: ru.stackoverflow.com
Как сделать скролл диалога как в вк?
Скролл диалога чтобы отображался как главный, а не внутри блога сообщений.
Кроме перекрытия блока другим блоком через fixed
- Вопрос задан более трёх лет назад
- 2230 просмотров
Комментировать
Решения вопроса 1
Если лень читать — пример
То есть вы хотите сделать так, чтобы при прокрутке скроллился только блок диалогов, да?
Если я правильно понял вопрос, то скажите, что значит ваша фраза «Кроме перекрытия блока другим блоком через 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
Вообще, структура DOM у vk.com довольно запутанная, но если упростить, выглядит она так:
Секрет Paper Scroll туалетка в вк
body div.scroll-fix-wrap div.scroll-fix div.page-layout
Названия блоков мною выбраны так, чтобы наиболее доступно показать как именно реализован scroll-fix. Некоторые названия блоков, которые я здесь использую, действительно используются vk.com, но не все, поэтому не ищите 100%-го совпадения.
Тут я набросал скелетик vk.com, который показывает, как это все происходит, как структуру так и переключение между режимами скролла. Там найдете ответ на свой вопрос.
На сайте вконтакте размеры большинства основных блоков задаются динамически, например считаются onscroll; в моем примере все не так круто, никакого динамического подсчета нету, но я честно разделил указания размеров так же, как на vk.com: статические — указаны в css, динамические — в html, индвидиуально для каждого элемента, который нуждается в динамическом пересчете размера.
Источник: qna.habr.com
Как стилизовать или убрать полосу прокрутки — CSS скроллбар
Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.
Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.
Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.
1 Как убрать полосу прокрутки CSS
Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:
CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar { width: 0; } /*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar { width: 0; }
2 Как изменить скроллбар CSS
Теперь давайте рассмотрим базовую структуру полосы прокрутки:
-webkit-scrollbar состоит различных псевдо-элементов.
- ::-webkit-scrollbar — это фон самого скроллбара.
- ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
- ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
- ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.
Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.
HTML Document
3 CSS стили
Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.
CSS #element { overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; } .overflow { min-height: 400px; }
Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .
Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.
CSS #element::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; }
Ширина полосы в 7 пикселей
Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.
CSS #element::-webkit-scrollbar-thumb { background-color: #223c50; }
Изменение цвета индикатора
Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.
CSS #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; }
Добавление внутренней тени
В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.
Пример 1
Пример 2
Пример 3
Пример 4
Пример 1 #element::-webkit-scrollbar { width: 10px; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa; } #element::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f9f9fd; }
Пример 2 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #f2bf93; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent); }
Пример 3 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #356184; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .25)), color-stop(.5, transparent), to(transparent)); }
В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.
Пример 4 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea); }
Источник: active-vision.ru