18.06.2012, 13:51
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
Как сделать такой же скролл, как у ВКонтакте, при просмотре фотографий
Я не сижу ВКонтакте! Что это за скролл?
Это такой эффектик (дизайнерская находка, трикс - называйте, как хотите), при котором модальное окно скроллится, если не помещается в видимую часть страницы. Так же это называется "скроллом отдельного блока", "скроллом модального окна".
Вкратце, как оно работает?
Всё просто: контент страницы находится во wrapper'e, а рядом с ним (т.е. в том же родителе, что и контент) находится wrapper модального окна (далее "ширма"), который имеет прокрутку по вертикали и фиксированные размеры на всю видимую часть страницы (т.е. размеры окна. В примере я использовал фиксированное позиционирование со стопроцентными шириной и высотой.). Соответственно, когда модальное окно скрыто, эта ширма тоже скрыта, когда модальное окно показано, ширма видима. Для того, чтобы скрыть скролл контента, элементу <body> устанавливают overflow: hidden, пока модальное окно показано. В старых IE следует убирать прокрутку у элемента <html>*. Пример кода:
Необходима свободная страница, без панелей редактирования, поэтому я сделал пример на jsbin. Код комментирован, я думаю, читатель разберётся сам, если будет читать код.
http://jsbin.com/epicom
Код проверен: IE10, IE9, IE8, IE7 (7,8,9 - в режиме эмулирования, Win8 RC), CH19, FF13, O12 <-- Linux x86_64.
В IE "БАГ"после показа модального окна, для того, чтобы скроллить его, нужно щёлкнуть на нём мышкой. Если знаете решение, прошу отписать в ЛС. * может быть причина "не в старом IE"
Последний раз редактировалось melky, 21.06.2012 в 12:05.
|