JavaScript прокрутка как ВКонтакте (fixed IE css)
Реализация прокрутки окна на JavaScript как ВКонтакте. При прокрутке окна браузера прокручивается только элемент с контентом, а страница зафиксирована на месте.
Демо-пример
Скачать пример FixScroll
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Scroll for fixed background</title>
<script type="text/javascript" language="JavaScript" src="func.js"></script>
<style>
BODY{
margin:0;
padding:0;
background: url(about:blank) no-repeat;
}
#main{
overflow:hidden;
border:1px solid blue;
position: absolute;
top:0;
left: 0;
top:expression(document.getElementsByTagName('body')[0].scrollTop+'px');
width: 200;
height: 200px;
}
#content{
border:1px solid green;
width:100px;
height:100px;
overflow: auto;
margin: 48px;
}
#wscroll{
position:absolute;
width:1px;
top:0;
left:0;
border:1px solid red; /* Виден для демо-примера */
}
</style>
</head>
<body>
<!-- Невидимый элемент, фактически браузер прокручивает его. -->
<div id="wscroll"></div>
<div id="main">
<div id="content">
Text 1<br />Text 2<br />Text 3<br />
Text 4<br />Text 5<br />Text 6<br />
Text 7<br />Text 8<br />Text 9<br />
Text 10<br />Text 11<br />Text 12<br />
Text 13<br />Text 14<br />Text 15<br />
Text 16<br />Text 17<br />Text 18<br />
Text 19<br />Text 20<br />Text 21<br />
</div>
</div>
<script type="text/javascript" language="JavaScript">
var el_id='content';
//Возвращает: координаты x/y, ширину, высоту элемента
var el_xy=abs_pos(el_id);
//коорд. Y + высота элемента #content
var el_yh=(el_xy['y']+el_xy['h']);
//Высота #content с учетом прокрутки
var el_sh=get_scroll_height(el_id);
//Ширина и высота окна (видимая область сайта)
var cw=get_client_width();
var ch=get_client_height();
/* Центрируем элемент #main */
var xy=abs_pos('main');
if(cw>xy['w']) set_style('main', 'marginLeft', ((cw-xy['w'])/2));
if(ch>xy['h']) set_style('main', 'marginTop', ((ch-xy['h'])/2));
/*
Условия:
1) Прокручиваемый элемент должен быть полностью виден в окне браузера.
2) Наличие скрытого текста для прокрутки.
*/
if(ch>=el_yh && el_sh>el_xy['h']){
//Закрепляем фон страницы
set_style(get_doc_body(), 'backgroundAttachment', 'fixed');
//Высота окна + высота скрытой части текста
var el_ys=ch+(el_sh-el_xy['h']);
//Задаем длину линии #wscroll для ее прокрутки
set_style('wscroll', 'height', el_ys);
//Скрываем элементы прокрутки #content
set_style(el_id, 'overflow', 'hidden');
//Фиксируем элемент #main
set_style('main', 'position', 'fixed');
//Если неподдерживается fixed, то задаем обратно absolute (на всякий случай).
if(get_style('main', 'position')!='fixed')
set_style('main', 'position', 'absolute');
/*
Функция-обработчик события OnScroll окна браузера,
ассоциируем с прокруткой элемента #content.
*/
var func=function(){
//get_scroll_top(элемент) - возвращает значение прокрутки.
//Для кроссбраузерности: (document.documentElement || document.body), (0 || 1)=1
set_scroll_top(el_id, (get_scroll_top(document.documentElement) || get_scroll_top(document.body)));
}
if(typeof(document.onscroll)!=='undefined') document.onscroll=func;
else window.onscroll=func;
}else set_style('main', 'top', 0);
</script>
</body>
</html>
