Форум

barkar · #1 (**permalink**) 15.04.2014, 13:54

Добрый день. Возник вопрос как сделать так чтоб при на ведении на элемент событие scroll работало в этом элементе, и не срабатывало на body.

<body title="Содержание с прокруткой">
    <div>Содержание с прокруткой 1</div>
    <div>Содержание с прокруткой 2</div>
    <div>Содержание с прокруткой 3</div>
    <div>Содержание с прокруткой 4</div>
</body>

При этом чтоб полоса прокрутки на body не пропадала.

jsnb · #2 (**permalink**) 15.04.2014, 15:33

Если для колеса мыши, то можно сделать что-то типо такого:
http://learn.javascript.ru/play/bs8KB
Если для стрелок, то при mouseenter фокусироваться на диве и обрабатывать keydown по нужным клавишам.

barkar · #3 (**permalink**) 15.04.2014, 18:05

В IE 10 не хочет срабатывает, addEventListener заменил attachEvent, а так работает во всех.
А как померить с IE.
У меня jquery 2.1 может через него проще будет реализовать.

barkar · #4 (**permalink**) 15.04.2014, 18:49

Нашел вот код рабочий но в 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();
  
}

рони · #5 (**permalink**) 15.04.2014, 19:23

barkar,
Вариант запрета scroll на body jquery...
на всякий случай

Сообщение от barkar

jquery 2.1

не для старых браузеров, код ниже работает со всеми версиями 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>

barkar · #6 (**permalink**) 15.04.2014, 21:24

Сообщение от рони

Вариант запрета scroll на body jquery...
на всякий случай

Универсальный вариант. Вопрос снят.

Спасибо за помощь!

Форум

Справочник

Discord чат

Курсы javascript