Прокрутка колесом горизонтального скролла
Добрый день!
Есть скроллбокс. Реализован без наворотов: div-"вложение" помещен в div-"контейнер". Ширина "вложения" превышает ширину "контейнера". Таким образом браузер автоматически возвращает горизонтальный скролл в "контейнере". По дефолту горизонтальная прокрутка работает при shift+колесо. Задача: убить shift и оставить только колесо. Собственные нубовские соображения: 1. Программно имитировать зажатую клавишу shift. либо 2. Перехватить событие колеса и заставить его прокручивать горизонтальный скролл. либо 3. Переопределить дефолтный вертикальный скролл на горизонтальный. Помогите перейти от теоретических соображений к практическим.:thanks: |
Где-то уже было (или не на этом форуме), поищите по ключевому слову DOMMouseScroll.
Примерно реализация такая:
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var wDelta = 120;
function scrollDoc(e) {
if (!e) e = event;
if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
var __delta = e.wheelDelta || -e.detail;
__delta /= Math.abs(__delta);
document.documentElement.scrollLeft -= __delta * wDelta; // FF, Opera, IE
if (this.attachEvent) return false;
document.body.scrollLeft -= __delta * wDelta; // Chrome
}
window.onload = function() {
var html = document.documentElement;
if (html.attachEvent) {
html.attachEvent("onmousewheel", scrollDoc); // IE and Opera
} else {
html.addEventListener("DOMMouseScroll", scrollDoc, false); // FF
html.addEventListener("mousewheel", scrollDoc, false); // Chrome
}
}
</script>
</head>
<body>
<div style="width:2500px; background:red; height:2500px;"></div>
</body>
</html>
|
Ооо. Спасибо, дружище! ТО что нужно! Премного благодарен.
|
| Часовой пояс GMT +3, время: 12:43. |