Ну и название темы....
Столкнулся с такой проблемой. Есть плавающий див с текстом, после прокрутки дива начинает прокручиваться сама страничка (что нежелательно пока мыша находится над дивом).
На данный момент нормального решения не нашел.
В идеале должно получиться что-то вроде первого варианта (см. пример):
<!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
Работает так как нужно, НО! Пропадает основной скролл(оно и понятно) и вся страница смещается вправо на ширину скрола, "костыли" с отступами колдовать не хочется... Может быть подскажет кто-то красивое решение?
Помогите люди добрые )