Ладно попробую пойти от обратного... Блокирую скролл при наведении на див.
$(function() {
$(".chat").mouseenter(function() {
document.onmousewheel = function (e) {
e.preventDefault();
}
}).mouseleave(function() {
document.onmousewheel = null;
})
})
Теперь надо придумать как прокручивать див колесом )))) |
Финишная прямая... Помогите кто чем может...
Частично решить задачу удалось, но теперь другой вопрос, скорлирование DIVа... Вот код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://yandex.st/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<script src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.js" type="text/javascript"></script>
<script language="javascript"><!--
$(function() {
/* запрещаем стандартное действие скрола при наведении */
$(".chat").mouseenter(function() {
document.onmousewheel = function (e) {
e.preventDefault();
}
/* перемещаем текст внутри дива */
$('#chat').mousewheel(function(event, delta) {
if (delta > 0) {
/* перемещение вверх */
$("#chatext").scrollTop(-10);
} else {
/* перемещение вниз */
$("#chatext").scrollTop(+10);
}
});
/* отменяем запрет скрола */
}).mouseleave(function() {
document.onmousewheel = null;
})
});
//--></script>
<style>
.chat { position:absolute; display:block; width:200px; height:100px; background:#AAA; overflow:hidden; }
</style>
</head>
<body>
<div style="width:100%; height:2000px">
<div class="chat" id="chat">
<div id="chatext" style="overflow:auto;width:220px;height:120px">
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
</div>
</div>
</div>
</body></html>
Вот пример: http://cybermanager.pro/test2.html Теперь проблема заключается в том, что не получается полностью скролировать див :( Подскажите, где я накосячил? |
Ура!!! Получилось ))) Всем спасибо!
Вот мое решение, может пригодиться кому-то:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://yandex.st/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<!-- подключем плагин колеса (около 2кб) //-->
<script src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.js" type="text/javascript"></script>
<script language="javascript"><!--
$(function() {
/* запрещаем стандартное действие скрола при наведении */
$(".chat").mouseenter(function() {
document.onmousewheel = function (e) {
e.preventDefault();
}
/* перемещаем текст внутри дива */
$('#chat').mousewheel(function(event, delta) {
if (delta > 0) {
/* перемещение вверх */
chatext.scrollTop-=10;
} else {
/* перемещение вниз */
chatext.scrollTop+=10;
}
});
/* отменяем запрет скрола */
}).mouseleave(function() {
document.onmousewheel = null;
})
});
//--></script>
<style>
/* задаем стиль диву */
.chat {position:absolute; display:block; width:375px; background:#888; color:#EEE; overflow:hidden; font-family:Tahoma,sans-serif; font-size:12px; border:3px solid #444; border-radius:6px; padding:10px}
</style>
</head>
<body>
<div style="width:100%; height:2000px">
<div class="chat" id="chat">
<!-- контейнер //--><span style="font-size:20px;margin:5px">Покрути над дивом колесом!</span>
<div id="chatext" style="overflow:auto;width:375px;height:150px;margin:5px">
Текст для прокрутки
Текст для прокрутки
Текст для прокрутки
</div>
</div>
</div>
</body></html>
Рабочий пример тут: http://cybermanager.pro/result.html Если у кого-нить есть вариант лучше и проще - буду признателен. |
не знаю как у вас получилось, у меня в мозиле скроллы работают на body
мой вариант без jquery
<script>
function wheel(event)
{
var delta=0
if(!event) event = window.event
if(event.wheelDelta) delta = event.wheelDelta/120
else if(event.detail) delta = -event.detail/3
if(delta && typeof handle == 'function')
{
handle(delta)
if(event.preventDefault) event.preventDefault()
event.returnValue = false
}
}
function over_div(elem)
{
handle = function(delta)
{
if(delta > 0) elem.scrollTop -= 30;
else elem.scrollTop += 30;
}
}
function out_div(elem)
{
handle = null
}
if(window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
<style>
.div_id
{
width:300px;
height:300px;
overflow-y:scroll;
border:1px solid #aaa;
margin-top:550px;
margin-left:150px
}
</style>
<body>
<img style="height:4000px;position:absolute;z-index:-5;visibility:hidden;">
<div class="div_id" onMouseOver="over_div(this)" onMouseOut="out_div(this)">
<script> for(i=0; i<100; i++) document.write("Текст <br>\n") </script>
</div>
</body>
|
| Часовой пояс GMT +3, время: 14:56. |