17.10.2011, 07:15
|
 |
Интернет-турист
|
|
Регистрация: 01.08.2008
Сообщений: 516
|
|
|
Прокрутка всплывающего окна
Пытаюсь разобраться как вконтакте устроена прокрутка всплывающего окна. Заинтересовало то, что контент страницы на заднем фоне не прокручивается, а прокручивается только всплывшее окно.
Вот пример: http://vkontakte.ru/yeremyan?z=video13555100_130393462%2Fvideos1355510 0
Пытался самостоятельно понять, понял что там хитрость, чтобы контент страницы повешать на position: absolute; и z-index:x; Но до конца так и не разобрался, очень много там кода ... Если можно, подскажите как подобное сделать в более простом варианте, или может расскажите принцип работы этого окна.
Спасибо. |
|
17.10.2011, 08:04
|
 |
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
я тоже не решился по коду разбираться. Идея в том, чтобы убрать прокрутку документа и разместить поверх div, растянув его на все окно. Когда содержимого будем много у этого div'а будет появляться прокрутка. Как убрать прокрутку у документа:
1. overflow: hidden. Но изменение overflow перезапускает флешки, которые находятся внутри, в ff.
2. сделать, чтобы документ поместился в окне полностью, т.е. подогнать его ширину и высоту. А чтобы позиция содержимого не изменилась, задать ее с помощью отрицательных margin-left/margin-top
а вот как они прокрутку в диалогах сделали, это мне самому интересно...
|
|
17.10.2011, 08:18
|
|
Интернет-турист
|
|
Регистрация: 01.08.2008
Сообщений: 516
|
|
я еще попробую минимизировать их код, вырезать всё ненужное, чтобы добраться до истины  |
|
17.10.2011, 10:55
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
прокрутка в диалогах(возможно подобная, не такая как у них)-два контейнера. родительский с overflow: hidden . отлавливает движение колеса-вложенный позиционируется исходя из этого относительно внешнего. при этом во вложенном контейнеры сообщений вложенные с сообщениями.Итого при событии движение колеса-позиционируется внутренний,но при этом позиционируется так ,чтоб вложенные в него открывались полностью-то есть ориентация но топ и и ботом вложенных-вместить те что влазят между началом и концом области,соответственно если топ и ботом не вмещаются то растяжка род контейнера.
|
|
17.10.2011, 11:26
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
greatilya,
подобное решение сойдёт?
http://avto.pro/catalog/honda/accord...7-11/#40811586
Правда там мою вёрстку засрали конечно.... но вобщем смысл ясен...
Последний раз редактировалось Seva1986, 17.10.2011 в 11:35.
|
|
17.10.2011, 12:15
|
|
Интернет-турист
|
|
Регистрация: 01.08.2008
Сообщений: 516
|
|
dmitriymar,
Как я понял вы предлагаете много JS кодинга. Сегодня вечером всё же расковыряю контакт и доберусь до истины.
|
Сообщение от Seva1986
|
|
подобное решение сойдёт?
|
Нет, это абсолютно не то. У вас там и прокрутка в диалоговом окне и в документе есть.
Последний раз редактировалось greatilya, 17.10.2011 в 12:19.
|
|
17.10.2011, 13:44
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
|
Сообщение от greatilya
|
|
Нет, это абсолютно не то. У вас там и прокрутка в диалоговом окне и в документе есть.
|
что не то? прокрутку в нутри блока можно не делать, а самому блоку position:absolute вместо position:fixed.. |
|
17.10.2011, 18:15
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от Seva1986
|
|
что не то? прокрутку в нутри блока можно не делать, а самому блоку position:absolute вместо position:fixed..
|
прочитай тему еще раз и посмотри как оно работает в контакте и как у тебя
dmitriymar, не до конца понял, что ты написал. Но у тебя не хватает как минимум полосы прокрутки. Т.е. по идее еще надо создать блок с нулевой шириной, высотой равной высоте внешнего контейнера и высотой содержимого равной высоте содержимого внутреннего блока. И разместить этот блок справа, это будет полоса прокрутки, которую надо со всем остальным синхронизировать. Ну и еще клавиши вверх/вниз (пробел?) обрабатывать. |
|
17.10.2011, 18:50
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
Сообщение от x-yuri
|
|
Но у тебя не хватает как минимум полосы прокрутки. Т.е. по идее еще надо создать блок с нулевой шириной,
|
Это незачем.
Отлавливается событие колеса когда курсор находится над блоком сообщений,если над ним-запретить ст. действие браузера скрол и перепозиционировать вложенный контейнер относительно родительского с атрибутом overflow: hidden.
Клавиши отлавливать-ну а что мешает их отлавливать и отрабатывать по тому же алгоритму?
А вообще если нужен видимый скрол,то его не сложно добавить.
Писал подобный верт скролинг со скролбаром заказчика графическим. Единственное, что текст на блоки не бился-весь код занял около 50-70 строк
Последний раз редактировалось dmitriymar, 17.10.2011 в 18:55.
|
|
17.10.2011, 20:23
|
|
Интернет-турист
|
|
Регистрация: 01.08.2008
Сообщений: 516
|
|
Долго сидел ковырялся в коде контакта. Там конечно замучено всё очень и очень детально + поддержка различных устройств. Примерно их идею понял, и вот что у меня получилось:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var iScrolled = 0;
function window_show() {
iScrolled = $(window).scrollTop();
$(window).scrollTop(0);
$('#container_all').css('position', 'fixed');
$('#container_all').css('margin-top', '-'+iScrolled+'px');
$('#layer_bg').css('display', 'block');
$('#layer').css('display', 'block');
}
function window_hide() {
$('#container_all').css('margin-top', '0px');
$('#container_all').css('position', 'absolute');
$(window).scrollTop(iScrolled);
$('#layer_bg').css('display', 'none');
$('#layer').css('display', 'none');
}
</script>
<style media="all" type="text/css">
/* reset css */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding:0;margin:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img,abbr,acronym {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight:normal;font-style:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-size:100%;}
q:before,q:after {content:'';}
#container_all { position:absolute; top: 0; left: 0; width: 100%; z-index: 1; }
#container_content { width:960px; margin:0 auto; border-left:#ccc 1px solid; border-right:#ccc 1px solid; }
#layer_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 500; overflow: hidden; background: #000; opacity: 0.2; filter: alpha(opacity=20); display: none; }
#layer { position:absolute; top: 0; left: 0; width: 100%; z-index: 600; padding:25px 0; display: none; }
#layer_box { width:600px; margin:0 auto; background:#fff; }
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id="container_all">
<div id="container_content" onclick="window_show()">
м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />ам<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />ам<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а
</div>
</div>
<div id="layer_bg"></div>
<div id="layer" onclick="window_hide()">
<div id="layer_box">
м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а
</div>
</div>
</body>
</html>
Сразу упомяну: никаких визуальных эффектов не делал.
Прошу, бросайте камни. |
|
|
|
