|
Сообщение от Vetall
|
|
Аналогично "ВКонтакте" диалоги реализованы, если страница больше экрана, она просто выходит за его пределы без скроллов.
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow</title>
<style>
.layer {
overflow: scroll; /* Добавляем полосы прокрутки */
width: 300px; /* Ширина блока */
height: 150px; /* Высота блока */
padding: 5px; /* Поля вокруг текста */
border: solid 1px black; /* Параметры рамки */
scrollbar-face-color: FFFFFF;
scrollbar-track-color: FFFFFF;
scrollbar-arrow-color: FFFFFF;
scrollbar-highlight-color: FFFFFF;
scrollbar-3dlight-color: FFFFFF;
scrollbar-shadow-color: FFFFFF;
scrollbar-darkshadow-color: FFFFFF;
}
</style>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="layer">
<h2>Duis te feugifacilisi</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
А тут ещё какойто текст или картинки...
</body>
</html>
<script type="text/javascript">
var UA=window.navigator.userAgent;
var Firefox = UA.match(/Firefox\/\w+\.\w+/i);
function addHandler(object, event, handler, useCapture) {
if (object.addEventListener) {
object.addEventListener(event, handler, useCapture ? useCapture : false);
} else if (object.attachEvent) {
object.attachEvent('on' + event, handler);
} else alert("Add handler is not supported");
}
// Добавляем обработчики
/* Gecko */
addHandler(window, 'DOMMouseScroll', wheel);
/* Opera */
addHandler(window, 'mousewheel', wheel);
/* IE */
addHandler(document, 'mousewheel', wheel);
// Обработчик события
function wheel(event) {
var delta; // Направление скролла
// -1 - скролл вниз
// 1 - скролл вверх
event = event || window.event;
// Opera и IE работают со свойством wheelDelta
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
// В Опере значение wheelDelta такое же, но с противоположным знаком
//if (window.opera) delta = -delta;
delta = -delta;
// В реализации Gecko получим свойство detail
} else if (event.detail) {
delta = -event.detail / 3;
}
// Запрещаем обработку события браузером по умолчанию
if (event.preventDefault) event.preventDefault();
delta = delta*8;
event.returnValue = false;
var ScrllBlk=$(".layer");
var Height=ScrllBlk.height();
var Top = ScrllBlk.scrollTop();
if(Firefox) delta = -delta;
ScrllBlk.scrollTop(Top+delta);return delta;
}exampleActivate()
</script>