OFF scroll на body > ON scroll children
Добрый день. Возник вопрос как сделать так чтоб при на ведении на элемент событие scroll работало в этом элементе, и не срабатывало на body.
<body title="Содержание с прокруткой">
<div>Содержание с прокруткой 1</div>
<div>Содержание с прокруткой 2</div>
<div>Содержание с прокруткой 3</div>
<div>Содержание с прокруткой 4</div>
</body>
При этом чтоб полоса прокрутки на body не пропадала. :help: |
Если для колеса мыши, то можно сделать что-то типо такого:
http://learn.javascript.ru/play/bs8KB Если для стрелок, то при mouseenter фокусироваться на диве и обрабатывать keydown по нужным клавишам. |
В IE 10 не хочет срабатывает, addEventListener заменил attachEvent, а так работает во всех.
А как померить с IE. У меня jquery 2.1 может через него проще будет реализовать. |
Нашел вот код рабочий но в IE инверсия прокрутки происходит
var elem = document.getElementById('container');
if (elem.addEventListener) {
if ('wheelHandler' in document) {
// IE9+, FF17+
elem.addEventListener ("wheel", wheelHandler, false);
} else if ('onmousewheel' in document) {
// устаревший вариант события
elem.addEventListener ("mousewheel", wheelHandler, false);
} else {
// 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
elem.addEventListener ("MozMousePixelScroll", wheelHandler, false);
}
} else { // IE<9
elem.attachEvent ("onmousewheel", wheelHandler);
}
function wheelHandler(e) {
e = e || window.event;
var delta = e.deltaY || e.detail || e.wheelDelta;
console.log(delta);
console.log(e);
this.scrollTop += delta > 0 ? 15 : -15;
e.preventDefault();
}
|
barkar,
Вариант запрета scroll на body jquery... на всякий случай Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #FFCC66;
}
div{
width: 200px;
height: 150px;
overflow-y: scroll;
overflow-x: hidden;
}
div div{
width: 200px;
height: 500px;
background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #8B4513), color-stop(1, #FFEFD5));
background-image: -ms-linear-gradient(top, #8B4513, #FFEFD5);
background-image: -o-linear-gradient(top, #8B4513, #FFEFD5);
background-image: -moz-linear-gradient(top, #8B4513, #FFEFD5);
background-image: -webkit-linear-gradient(top, #8B4513, #FFEFD5);
background-image: linear-gradient(to bottom, #8B4513, #FFEFD5)
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script src="http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js"></script>
</head>
<body>
<div><div>Содержание с прокруткой 1</div></div><br>
<div><div>Содержание с прокруткой 2</div></div><br>
<div><div>Содержание с прокруткой 3</div></div><br>
<div><div>Содержание с прокруткой 4</div></div>
<script>
$('div').mousewheel(function(event, delta, deltaX, deltaY) {
event.preventDefault();
this.scrollTop += delta > 0 ? -15 : 15;
})
</script>
</body>
</html>
|
Цитата:
Спасибо за помощь!:thanks: |
| Часовой пояс GMT +3, время: 08:13. |