Запрет прокрутки при прокрутке 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://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 Работает так как нужно, НО! Пропадает основной скролл(оно и понятно) и вся страница смещается вправо на ширину скрола, "костыли" с отступами колдовать не хочется... Может быть подскажет кто-то красивое решение? Помогите люди добрые ) |
Поищи методы статического фона для BODY.
<BODY background="Фоновое изображение" bgproperties=fixed> |
Не работает
|
Ну правильно!
Ваша проблема в том, что у вас дивы зафиксинные.! Разберемся пока с ними, а потом с фоном! Вообщем например так : <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"> // зачем это нужно ?! |
Стоп! Понял, что вам надо! Сейчас помогу!
|
<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;"> вот пожалуйста ) А вообще это очень легко гуглится! |
Возможно я плохо объясняю :((( Простите... Попробую еще раз.
У меня есть на сайте плавающий див (чат) в нем отображаются сообщения по 50-100 шт. С дивом проблем никаких нет он и так на сайте FIXED. проблема в том, что когда крутишь над дивом роликом он скролируется до последней строки, а потом начинает прокручиваться сама страничка (как раз этого и не надо). Т. е. при позиции мыши над дивом должен быть запрет на скролл главного окна, но возможность скролить сам див. Я нашел решение как в примере верхний див. Т. е. чтоб почувствовать разницу покрути колесико над разными дивами. В первом случае скрола страницы не будет. Сейчас это достигается тем что в свойствах боди прячется скрол $('body').css("overflow","hidden"); соответственно происходит запрет. Мне нужно получить такой результат иным путем ибо пропадание скрола главной странички освобождает справа 17 пикселей и сайт смещается вправо при наведении мыши на див. Это не очень приятная штука. Решение есть через "костыли" - рисовать отступ справа в главном диве при наведении: $("#main").css({"marginRight":17}); тогда "дерганье" не заметно, но весь косяк в том, что в разных браузерах разная ширина скрола. Скрол может быть настроен самим пользователем в винде. На айпадах и айфонах его вообще нет. Поэтому надо искать какое-то решение. Я специально пример загрузил. В посте есть ссылка, чтоб не собирать все руками. |
Пока на ум приходит только: после полной прокрутки в диве, если мышь ещё в нём, возвращать страницу при скролле в положение, при котором произошёл вход мыши в этот див.
|
$('body').css("overflow-y","hidden");
Слево-направо скролл останетсяВообще-то правильней привязать еvent к колесу мыши и запретить прокрутку body колесом при наличии чата |
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? |
| Часовой пояс GMT +3, время: 00:15. |