5 марта 2018 в 5:39
Есть просто аккордеон на jQuery.
Допустим пользователь крутит вниз колесом мыши внутри 1-го раскрытого пункта. Как сделать чтобы при этом раскрывался 2-й пункт?
1-й пункт он по высоте маленький, область скрола не образует, потому
$( ".punkt" ).scroll(function() {
$(".region-harmonika").accordion({ active: 1 });
});
$(".region-harmonika").accordion({ active: 1 });
});
не подходит. А может я и не прав...
Комментарии
https://github.com/jquery/jquery-mousewheel
А зачем нужен jquery-mousewheel, если без него можно накодить типа:
if(e.originalEvent.deltaY < 0) {
/*крутим вверх*/
} else{
/*крутим вниз*/
}
});
Какой профит от данной библиотеки?
А зачем нужен jquery, если без него можно накодить типа:
.addEventListener('wheel', function(e) {
if(e.deltaY < 0) {
/*крутим вверх*/
} else{
/*крутим вниз*/
}
});
Какой профит от данной библиотеки?
Раз аккордеон на jQuery, логично чтоббы все остальное тоже было на jQuery
Кароче сделал так: https://jsfiddle.net/PlayboyZP/y7q7v98j/
Работает для 2-го табика аккордеона
if(e.originalEvent.deltaY < 0) {
$(".region-harmonika").accordion({ active: 0 });
} else{
$(".region-harmonika").accordion({ active: 2 });
}
});
Естественно могу прописать такое для 1го и 3го. А как для всех? Подозреваю что надо создать массив $(".block-content") и перебрасывать на n+1 либо n-1 элемент? А как это сделать?
Может так:
https://jsfiddle.net/PlayboyZP/xbmv63rr/
как считаете?
В jsfiddle (https://jsfiddle.net/PlayboyZP/xbmv63rr/) все выглядит хорошо, а на реальном сайте плохо: http://test.spamer35.myjino.ru/
Скрипт тут http://test.spamer35.myjino.ru/sites/all/themes/iam/js/animations.js
Оно то работает, но если крутить мышкой быстро, то цепляет табик аккордеона, который еще "не приехал". Как это побороть? mousewheel поможет?
Чуть переосмыслил код с учетом функции debounce и того, что в таб может быть скролируемым.
Сделал так http://test.spamer35.myjino.ru/
Скрипт все еще тут: http://test.spamer35.myjino.ru/sites/all/themes/iam/js/animations.js
Вот он:
$(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);
Как-то калично это работает. Можно это как-то "плавнее" сделать, как считаете?