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

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

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

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

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

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

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

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

Комментарии

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

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

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

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

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

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

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

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

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

Раз аккордеон на 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 10 месяцев назад

В 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 10 месяцев назад

Чуть переосмыслил код с учетом функции 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);  

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