Непонятное поведение полосы прокрутки в контейнере
Здравствуйте!
Проблема заключается в следующем. Есть контейнер с текстом, ему задан стиль overflow:auto. Текст заведомо больше размера контейнера, поэтому появляется прокрутка. Если прокрутить текст вниз прокруткой и перевести курсор на текст, то прокрутка вернется на самый верх. В Firefox и IE7 такого не происходит. Все остальные браузеры, включая IE8, некорректно отрабатывают. Как устранить это досадное недоразумение? Помогите, пожалуйста! Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.block { position:absolute; display:none; width:120px; height:100px; overflow:auto; background-color:#fff; border:1px solid #000; }
.block a { display:block; padding:3px; background-color:#fff; }
.block a:hover { background-color:silver; }
</style>
<script>
function open_close(w) {
document.getElementById('block').style.display = w ? 'block' : 'none';
}
</script>
</head>
<body>
<div id=block class=block onmouseover="open_close(1)" onmouseout="open_close()"><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a><a href="">Ссылка 1</a></div><a href="javascript:open_close(1)">открыть блок</a>
</body>
</html>
События onmouseover и onmouseout обязательны. Когда курсор на контейнере он должен быть инициализирован, когда курсор уходит с контейнера, он должен закрываться. |
События mouseover/mouseout всплывают с внутренних элементов.
|
Тоесть получается, что с каждого внутреннего элемента происходит инициализация блока open_close(1) и прокрутка поднимается наверх?
Тогда как это устранить? |
Проверять источник события.
|
А можно по подробнее или ссылочку на пример кода. Не совсем понимаю как это.
|
|
Все же не удается перехватить источник. Т.к. если наводить курсор на полосу прокрутки блока то срабатывают onmouseout и onmouseover, и окно закрывается.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css">
.block { position:absolute; display:none; width:120px; height:100px; overflow:auto; background-color:#fff; border:1px solid #000; }
.block a { display:block; padding:3px; background-color:#fff; }
.block a:hover { background-color:silver; }
</style>
<script type="text/javascript">
function open_close() {
document.getElementById("block").style.display = "block";
document.onmousemove = function (a) {
a = a || window.event;
a = (a.target || a.srcElement).tagName.toLowerCase();
if (a == "body" || a == "html") {
document.getElementById("block").style.display = "none";
document.onmousemove = null
}
}
};
</script>
<title></title>
</head>
<body>
<div id="block" class="block" >
<a href="">Ссылка 1</a><a href="">Ссылка 1</a>
<a href="">Ссылка 1</a><a href="">Ссылка 1</a>
<a href="">Ссылка 1</a><a href="">Ссылка 1</a>
<a href="">Ссылка 1</a><a href="">Ссылка 1</a>
<a href="">Ссылка 1</a><a href="">Ссылка 1</a>
<a href="">Ссылка 1</a><a href="">Ссылка 1</a>
<a href="">Ссылка 1</a><a href="">Ссылка 1</a>
</div>
<a href="javascript:open_close()" >открыть блок</a>
</body>
</html>
|
Спасибо! Очень помогло в решении проблемы.
|
Не все браузеры под виндой справились
FF, GC, Opera - без вопросов
IE8 - вообще пример не запустился (возможно, проблема с запуском примеров); Safari - не работает ссылка "открыть блок" |
MikhailGirshberg,Safari и IE8 блокируют просмотр примера со другого сайта по настройкам безопасности так что лучше пример скопировать и проверить его работоспособность автономно в этих браузерах
|
| Часовой пояс GMT +3, время: 18:37. |