Как сделать ракрытие пунктов акордеона по движению колесом внутри каждого пункта.

Аватар пользователя VasyOK

Есть просто аккордеон на jQuery.

Допустим пользователь крутит вниз колесом мыши внутри 1-го раскрытого пункта. Как сделать чтобы при этом раскрывался 2-й пункт?

1-й пункт он по высоте маленький, область скрола не образует, потому

 $( ".punkt" ).scroll(function() {            
      $(".region-harmonika").accordion({ active: 1 });
  });

не подходит. А может я и не прав...

Тип материала:
Версия Drupal:
0 Thanks

Комментарии

Аватар пользователя VasyOK
VasyOK 5 месяцев назад

А зачем нужен jquery-mousewheel, если без него можно накодить типа:

$(".work .block-content").on('wheel', function(e){
      if(e.originalEvent.deltaY < 0) {
         /*крутим вверх*/
      } else{
          /*крутим вниз*/
      }
    });

Какой профит от данной библиотеки?

Аватар пользователя bumble
bumble 5 месяцев назад
2

А зачем нужен jquery, если без него можно накодить типа:

document.querySelectorAll('.work .block-content')
        .addEventListener('wheel', function(e) {
            if(e.deltaY < 0) {
                /*крутим вверх*/
            } else{
                /*крутим вниз*/
            }
        });

Какой профит от данной библиотеки?

Аватар пользователя VasyOK
VasyOK 5 месяцев назад

Раз аккордеон на jQuery, логично чтоббы все остальное тоже было на jQuery :)

Кароче сделал так: https://jsfiddle.net/PlayboyZP/y7q7v98j/

Работает для 2-го табика аккордеона

$(".two .block-content").on('wheel', function(e){
      if(e.originalEvent.deltaY < 0) {
        $(".region-harmonika").accordion({ active: 0 });  
      } else{
        $(".region-harmonika").accordion({ active: 2 });  
      }
    });

Естественно могу прописать такое для 1го и 3го. А как для всех? Подозреваю что надо создать массив $(".block-content") и перебрасывать на n+1 либо n-1 элемент? А как это сделать?

Аватар пользователя VasyOK
VasyOK 5 месяцев назад

В jsfiddle (https://jsfiddle.net/PlayboyZP/xbmv63rr/) все выглядит хорошо, а на реальном сайте плохо: http://test.spamer35.myjino.ru/

Скрипт тут http://test.spamer35.myjino.ru/sites/all/themes/iam/js/animations.js

Оно то работает, но если крутить мышкой быстро, то цепляет табик аккордеона, который еще "не приехал". Как это побороть? mousewheel поможет?

Аватар пользователя VasyOK
VasyOK 5 месяцев назад

Чуть переосмыслил код с учетом функции debounce и того, что в таб может быть скролируемым.

Сделал так http://test.spamer35.myjino.ru/
Скрипт все еще тут: http://test.spamer35.myjino.ru/sites/all/themes/iam/js/animations.js

Вот он:

(function($){
  $(document).ready(function(){      

      $( ".region-harmonika" ).accordion({      
        header: ".block-title",
        animate: 1000,
        heightStyle: "fill"                    
      });

      $(".region-harmonika").accordion("refresh");

      $(window).resize(function() {      
        $(".region-harmonika").accordion("refresh");
      });        
     
      var scroll_place = $(".region-harmonika .block-content").toArray();    
     

      $.each( scroll_place, function( i, value ) {
       
        var funk = function(e){
          if(e.originalEvent.deltaY < 0 && $( this ).scrollTop() == 0 ) {
             
            $(".region-harmonika").accordion({ active: i-1 });            
            console.log('Moove up');
         
          }
         
          if(e.originalEvent.deltaY >= 0 && $( this ).height() + $( this ).scrollTop() >= this.scrollHeight)
          {                          
           
            $(".region-harmonika").accordion({ active: i+1 });            
            console.log('Moove down');
         
          }                    
           
        }

        $(value).on('wheel', $.debounce(1000, true, funk));            
       
      });        
   
  });
   
})(jQuery);  

Как-то калично это работает. Можно это как-то "плавнее" сделать, как считаете?