<div> и скролл
Здравствуйте, делая некоторые элементы дизайна в своём проекте, наткнулся на небольшую проблему. Суть в том чтобы в определённом месте html страницы был <div> (с невидимым но рабочим скроллом) пример тут:
http://my.sunshine-rp.ru/test.html зайдя на страницу, и прокручивая скролл, необходимо чтобы прокручивался текст именно в <div>'e, даже если курсор мыши находится за его пределами. Надеюсь что это реально осуществить, за помощь буду очень благодарен. |
Vetall,
Вопрос такой - на самой странице справо, в реале - будет прокрутка ? Поскольку если есть - каким макаром пользователь её прокрутит ? |
Deff,
Есть, но она совсем не подходит |
Vetall,
блин =- я не про то - я про логику работы - если колесиком крутим внутри - кто прокрутит страницу ? Может стоит обрамить этот блок еще в один с большей площадью и отслеживать: если курсор внутри этого поля - то прокручиваем внутренний - коли вышел - наружний ? |
Deff,
Мы, но как это относится к сути вопроса? |
Deff,
Наружного скролла не будет, т.к. эта страница будет подстраиваться под экран пользователя, что-то похожее можно увидеть в диалогах "ВКонтакте". |
Цитата:
т.е я кручу скролл - не думая , что страница прокрутицо - если больше экрана ? |
Deff,
Его не будет, в этом я уверен. |
Deff,
Аналогично "ВКонтакте" диалоги реализованы, если страница больше экрана, она просто выходит за его пределы без скроллов. |
Цитата:
<!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>
|
| Часовой пояс GMT +3, время: 03:39. |