Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.04.2014, 12:54
Интересующийся
Отправить личное сообщение для barkar Посмотреть профиль Найти все сообщения от barkar
 
Регистрация: 11.02.2014
Сообщений: 27

OFF scroll на body > ON scroll children
Добрый день. Возник вопрос как сделать так чтоб при на ведении на элемент событие scroll работало в этом элементе, и не срабатывало на body.
<body title="Содержание с прокруткой">
    <div>Содержание с прокруткой 1</div>
    <div>Содержание с прокруткой 2</div>
    <div>Содержание с прокруткой 3</div>
    <div>Содержание с прокруткой 4</div>
</body>

При этом чтоб полоса прокрутки на body не пропадала.
Ответить с цитированием
  #2 (permalink)  
Старый 15.04.2014, 14:33
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Если для колеса мыши, то можно сделать что-то типо такого:
http://learn.javascript.ru/play/bs8KB
Если для стрелок, то при mouseenter фокусироваться на диве и обрабатывать keydown по нужным клавишам.
Ответить с цитированием
  #3 (permalink)  
Старый 15.04.2014, 17:05
Интересующийся
Отправить личное сообщение для barkar Посмотреть профиль Найти все сообщения от barkar
 
Регистрация: 11.02.2014
Сообщений: 27

В IE 10 не хочет срабатывает, addEventListener заменил attachEvent, а так работает во всех.
А как померить с IE.
У меня jquery 2.1 может через него проще будет реализовать.
Ответить с цитированием
  #4 (permalink)  
Старый 15.04.2014, 17:49
Интересующийся
Отправить личное сообщение для barkar Посмотреть профиль Найти все сообщения от barkar
 
Регистрация: 11.02.2014
Сообщений: 27

Нашел вот код рабочий но в 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, 18:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,024

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>
Ответить с цитированием
  #6 (permalink)  
Старый 15.04.2014, 20:24
Интересующийся
Отправить личное сообщение для barkar Посмотреть профиль Найти все сообщения от barkar
 
Регистрация: 11.02.2014
Сообщений: 27

Сообщение от рони
Вариант запрета scroll на body jquery...
на всякий случай
Универсальный вариант. Вопрос снят.

Спасибо за помощь!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отключить scroll на body а в других элементах чтоб работал barkar Общие вопросы Javascript 2 11.04.2014 12:03