Вход

Просмотр полной версии : Запрет прокрутки при прокрутке DIV

cyberblade
09.11.2012, 08:34
Ну и название темы.... :)
Столкнулся с такой проблемой. Есть плавающий див с текстом, после прокрутки дива начинает прокручиваться сама страничка (что нежелательно пока мыша находится над дивом).

На данный момент нормального решения не нашел.

В идеале должно получиться что-то вроде первого варианта (см. пример):
<!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://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
$(function() {
$("#mydiv").mouseenter(function() {
$('body').css("overflow","hidden");
}).mouseleave(function() {
$('body').css("overflow","visible");
})
})
</script>
</head>
<body>
<div style="width:100%; height:2000px">
<h2>С остановкой</h2>
<span>Крутите колесико</span>
<div style="width: 200px; height:100px; overflow: auto;" id="mydiv">
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
</div>
<h2>Без остановки</h2>
<span>Крутите колесико</span>
<div style="width: 200px; height:100px; overflow: auto;">
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
</div>
</div>
</body>
</html>

Пример тут: http://cybermanager.pro/test.html

Работает так как нужно, НО! Пропадает основной скролл(оно и понятно) и вся страница смещается вправо на ширину скрола, "костыли" с отступами колдовать не хочется... Может быть подскажет кто-то красивое решение?

Помогите люди добрые )
Severtain
09.11.2012, 09:16
Поищи методы статического фона для BODY.
<BODY background="Фоновое изображение" bgproperties=fixed>
cyberblade
09.11.2012, 09:32
Не работает
Severtain
09.11.2012, 21:59
Ну правильно!
Ваша проблема в том, что у вас дивы зафиксинные.! Разберемся пока с ними, а потом с фоном! Вообщем например так :
<div style="width: 200px; height:100px; position:absolute; top:0%; overflow: auto;" id="mydiv">
<div style="width: 200px; height:100px; position:absolute; top:5%; overflow: auto;">


<div style="width:100%; height:2000px"> // зачем это нужно ?!
Severtain
09.11.2012, 22:03
Стоп! Понял, что вам надо! Сейчас помогу!
Severtain
09.11.2012, 22:08
<div style="width: 200px; height:100px; position:fixed; top:0px; overflow: auto;" id="mydiv">
<div style="width: 200px; height:100px; position:fixed; top:50px; overflow: auto;">

вот пожалуйста )
А вообще это очень легко гуглится!
cyberblade
09.11.2012, 22:51
Возможно я плохо объясняю :((( Простите... Попробую еще раз.

У меня есть на сайте плавающий див (чат) в нем отображаются сообщения по 50-100 шт. С дивом проблем никаких нет он и так на сайте FIXED. проблема в том, что когда крутишь над дивом роликом он скролируется до последней строки, а потом начинает прокручиваться сама страничка (как раз этого и не надо).
Т. е. при позиции мыши над дивом должен быть запрет на скролл главного окна, но возможность скролить сам див. Я нашел решение как в примере верхний див.

Т. е. чтоб почувствовать разницу покрути колесико над разными дивами. В первом случае скрола страницы не будет. Сейчас это достигается тем что в свойствах боди прячется скрол $('body').css("overflow","hidden"); соответственно происходит запрет. Мне нужно получить такой результат иным путем ибо пропадание скрола главной странички освобождает справа 17 пикселей и сайт смещается вправо при наведении мыши на див. Это не очень приятная штука. Решение есть через "костыли" - рисовать отступ справа в главном диве при наведении: $("#main").css({"marginRight":17}); тогда "дерганье" не заметно, но весь косяк в том, что в разных браузерах разная ширина скрола. Скрол может быть настроен самим пользователем в винде. На айпадах и айфонах его вообще нет. Поэтому надо искать какое-то решение.

Я специально пример загрузил. В посте есть ссылка, чтоб не собирать все руками.
bes
10.11.2012, 01:17
Пока на ум приходит только: после полной прокрутки в диве, если мышь ещё в нём, возвращать страницу при скролле в положение, при котором произошёл вход мыши в этот див.
Deff
10.11.2012, 02:56
$('body').css("overflow-y","hidden"); Слево-направо скролл останется


Вообще-то правильней привязать еvent к колесу мыши и запретить прокрутку body колесом при наличии чата
cyberblade
10.11.2012, 03:51
bes - Попробовал... В принципе работает, но проблема с "дерганием" меняется как шило на мыло ))))) вертикальное на горизонтальное )))

var mytop=0;
var myblock=0;
$(function() {
$(".chat").mouseenter(function() {
if (mytop == 0){
var topoffset = jQuery('.chat').offset();
mytop = topoffset.top;
} else {
var blockoffset = jQuery('.chat').offset();
myblock = blockoffset.top;
}
var scrollY = myblock - mytop;
window.onscroll = function () {
$("html,body").animate({"scrollTop":scrollY},0);
}

/*
$('body').css("overflow","hidden");
$("#main").css({"marginRight":17});
*/
}).mouseleave(function() {
/*
$('body').css("overflow","visible");
$("#main").css({"marginRight":0});
*/
})
});



2Deff - спасибо, а можно поподробнее про event?
cyberblade
10.11.2012, 09:50
Ладно попробую пойти от обратного... Блокирую скролл при наведении на див.

$(function() {
$(".chat").mouseenter(function() {
document.onmousewheel = function (e) {
e.preventDefault();
}
}).mouseleave(function() {
document.onmousewheel = null;
})
})


Теперь надо придумать как прокручивать див колесом ))))
cyberblade
10.11.2012, 12:08
Финишная прямая... Помогите кто чем может...

Частично решить задачу удалось, но теперь другой вопрос, скорлирование 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

Теперь проблема заключается в том, что не получается полностью скролировать див :(
Подскажите, где я накосячил?
cyberblade
10.11.2012, 14:21
Ура!!! Получилось ))) Всем спасибо!

Вот мое решение, может пригодиться кому-то:
<!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

Если у кого-нить есть вариант лучше и проще - буду признателен.
sonik_74
10.01.2013, 14:34
не знаю как у вас получилось, у меня в мозиле скроллы работают на 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>