04.07.2012, 19:01
|
|
Интересующийся
|
|
Регистрация: 09.06.2012
Сообщений: 19
|
|
|
<div> и скролл
Здравствуйте, делая некоторые элементы дизайна в своём проекте, наткнулся на небольшую проблему. Суть в том чтобы в определённом месте html страницы был <div> (с невидимым но рабочим скроллом) пример тут:
http://my.sunshine-rp.ru/test.html
зайдя на страницу, и прокручивая скролл, необходимо чтобы прокручивался текст именно в <div>'e, даже если курсор мыши находится за его пределами.
Надеюсь что это реально осуществить, за помощь буду очень благодарен. |
|
04.07.2012, 20:49
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Vetall,
Вопрос такой - на самой странице справо, в реале - будет прокрутка ?
Поскольку если есть - каким макаром пользователь её прокрутит ?
|
|
04.07.2012, 20:51
|
|
Интересующийся
|
|
Регистрация: 09.06.2012
Сообщений: 19
|
|
|
Deff,
Есть, но она совсем не подходит
|
|
04.07.2012, 20:52
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Vetall,
блин =- я не про то - я про логику работы - если колесиком крутим внутри - кто прокрутит страницу ?
Может стоит обрамить этот блок еще в один с большей площадью и отслеживать: если курсор внутри этого поля - то прокручиваем внутренний - коли вышел - наружний ?
Последний раз редактировалось Deff, 04.07.2012 в 20:54.
|
|
04.07.2012, 20:55
|
|
Интересующийся
|
|
Регистрация: 09.06.2012
Сообщений: 19
|
|
|
Deff,
Мы, но как это относится к сути вопроса?
|
|
04.07.2012, 20:57
|
|
Интересующийся
|
|
Регистрация: 09.06.2012
Сообщений: 19
|
|
|
Deff,
Наружного скролла не будет, т.к. эта страница будет подстраиваться под экран пользователя, что-то похожее можно увидеть в диалогах "ВКонтакте".
|
|
04.07.2012, 21:13
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от Vetall
|
|
Наружного скролла не будет,
|
Если Вы уверены в этом, - тогда один Вариант - если нет - другой!
т.е я кручу скролл - не думая , что страница прокрутицо - если больше экрана ? |
|
04.07.2012, 21:14
|
|
Интересующийся
|
|
Регистрация: 09.06.2012
Сообщений: 19
|
|
|
Deff,
Его не будет, в этом я уверен.
|
|
04.07.2012, 21:20
|
|
Интересующийся
|
|
Регистрация: 09.06.2012
Сообщений: 19
|
|
|
Deff,
Аналогично "ВКонтакте" диалоги реализованы, если страница больше экрана, она просто выходит за его пределы без скроллов.
|
|
04.07.2012, 21:54
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от 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>
Последний раз редактировалось Deff, 04.07.2012 в 23:02.
|
|
|
|
