Табы , и их переключение на событие скролла

360

06 апреля 2017, 19:55

Входные данные :

ul > li (табы)
Скрипт который добавляет класс активный на клик по ul > li
ul ширина 300px высота 500px

Нужно на выходе : - При положении курсора в области данной ul , и использование скролла на мыше , переключались табы.(сама сложность , как заставить при положении мышки внутри блока хотя и скролле на мышки , хотя бы выводить console.log(), тк листает глобальное окно)

(function($) { 
  function consctructTabs(allButton, holderDivs) { 
    var buttons = allButton, 
      Divs = holderDivs; 
 
    return $(buttons).click(function(elem) { 
      $(Divs).removeClass('ActiveTab'); 
      $(buttons).removeClass('ActiveButtonTab'); 
      for (var i = 0; i < buttons.length; i++) { 
        if (elem.target == buttons[i]) { 
          $(elem.target).addClass('ActiveButtonTab'); 
          $(Divs[i]).addClass('ActiveTab'); 
        } 
      } 
    }) 
  } 
 
  // TABS-CLIENTS 
  consctructTabs($('.clients-tab-nav li'), $('.realisation-right div')); 
  //___________________________________ 
 
 
})(jQuery);

.realisation-right div { 
  display: none; 
} 
 
.realisation-right .ActiveTab { 
  display: block; 
} 
 
.clients-tab-nav li { 
  display: block; 
  background: #000; 
  margin:0 0 20px 0; 
  color: #fff; 
  cursor:pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="clients-tab-nav"> 
  <li>1</li> 
  <li class="ActiveButtonTab">2</li> 
  <li>3</li> 
  <li>4</li> 
  <li>5</li> 
</ul> 
<div class="realisation-right"> 
  <div>11</div> 
  <div>22</div> 
  <div>33</div> 
  <div>44</div> 
  <div>55</div> 
 
</div>

Пример кода

Answer 1

Вот такой пример. На событии wheel https://jsfiddle.net/6okkLg5m/

var elem = $('.clients-tab-nav')[0];
if (elem.addEventListener) {
  if ('onwheel' in document) {
    // IE9+, FF17+, Ch31+
    elem.addEventListener("wheel", onWheel);
  } else if ('onmousewheel' in document) {
    // устаревший вариант события
    elem.addEventListener("mousewheel", onWheel);
  } else {
    // Firefox < 17
    elem.addEventListener("MozMousePixelScroll", onWheel);
  }
} else { // IE8-
  elem.attachEvent("onmousewheel", onWheel);
}
function onWheel(e) {
  e = e || window.event;
  // wheelDelta не дает возможность узнать количество пикселей
  var delta = e.deltaY || e.detail || e.wheelDelta;
  var info = document.getElementById('delta');
  info.innerHTML = +info.innerHTML + delta;
  e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}