Пропустить событие "колесико" через фиксированный контент
Лучший способ понять это - посмотреть эту скрипту.
Обратите внимание, что колесико мыши над фиксированным контентом в красном поле ничего не делает. Мне нужно прокручивать прокручиваемый div.
В случае, когда скрипка умирает - в основном у меня есть прокручиваемый div с фиксированным элементом над ним. Обычно, когда вы колесиком мыши прокручиваете div, он, конечно, прокручивается. Но если вы перешли на фиксированный элемент, тогда прокрутки не произойдет. В зависимости от вашего макета сайта это может быть интуитивно понятным для пользователя.
Решения jQuery в порядке.
Ответы
Ответ 1
Я думаю, что это делает то, о чем вы просите!
$('#fixed').bind('mousewheel', function(e){
var scrollTo= (e.wheelDelta*-1) + $('#container').scrollTop();
$("#container").scrollTop(scrollTo);
});
EDIT: обновлена ссылка jsFiddle на ту, которая фактически работает.
ДВОЙНОЙ РЕДАКТИРОВАНИЕ: Лучше обойтись без .animate() для дальнейшего тестирования...
Пример jsFiddle
TRIPLE EDIT:
Гораздо менее симпатичный (и, вероятно, будет ужасно медленным с большим количеством элементов на странице), но это работает, и я многим обязан fooobar.com/questions/344356/....
$('#fixed').bind('mousewheel', function(e) {
var potentialScrollElements = findIntersectors($('#fixed'), $('*:not(#fixed,body,html)'));
$.each(potentialScrollElements, function(index, Element) {
var hasVerticalScrollbar = $(Element)[0].scrollHeight > $(Element)[0].clientHeight;
if (hasVerticalScrollbar) {
var scrollTo = (e.wheelDelta * -1) + $(Element).scrollTop();
$(Element).scrollTop(scrollTo);
}
});
});
function findIntersectors(targetSelector, intersectorsSelector) {
var intersectors = [];
var $target = $(targetSelector);
var tAxis = $target.offset();
var t_x = [tAxis.left, tAxis.left + $target.outerWidth()];
var t_y = [tAxis.top, tAxis.top + $target.outerHeight()];
$(intersectorsSelector).each(function() {
var $this = $(this);
var thisPos = $this.offset();
var i_x = [thisPos.left, thisPos.left + $this.outerWidth()]
var i_y = [thisPos.top, thisPos.top + $this.outerHeight()];
if (t_x[0] < i_x[1] && t_x[1] > i_x[0] && t_y[0] < i_y[1] && t_y[1] > i_y[0]) {
intersectors.push($this);
}
});
return intersectors;
}
Ответ 2
Много, намного проще, но гораздо менее широко поддерживается, ответ следующий:
#fixed{ pointer-events:none; }
jsFiddle
Не работает в IE, хотя, к сожалению! Но вы могли бы использовать modernizr или somesuch, чтобы определить, поддерживается ли он и использовать jQuery как промежуток остановки, где это не так.
Предоставлено г-ном Домиником Стаббсом
Ответ 3
У меня была эта проблема, и это работает для меня (с использованием jquery):
$(document).ready( function (){
$('#fixed').on('mousewheel',function(event) {
var scroll = $('#container').scrollTop();
$('#container').scrollTop(scroll - event.originalEvent.wheelDeltaY);
return true;
});
});
Работает в Safari и Chrome: http://jsfiddle.net/5bwWe/36/
Ответ 4
UPDATE (август 2016 года): Кажется, изменились версии браузера, и уже невозможно повторно отправить WheelEvent на другую цель. См. Обсуждение здесь.
Для альтернативного решения, которое должно работать на разных платформах, попробуйте следующее:
var target = $('#container').get(0);
$('#fixed').on('wheel', function (e) {
var o = e.originalEvent;
target.scrollTop += o.deltaY;
target.scrollLeft += o.deltaX;
});
Рабочий пример: https://gist.run/?id=6a8830cb3b0564e7b16a4f31a9405386
Оригинальный ответ ниже:
Собственно, лучший способ сделать это - скопировать исходное событие. Я пробовал код @Tuokakouan, но прокрутка ведет себя странно (слишком быстро), когда мы используем сенсорную панель мультитач, которая имеет инерцию.
Здесь мой код:
var target = $('#container').get(0);
$('#fixed').on('wheel', function(e){
var newEvent = new WheelEvent(e.originalEvent.type, e.originalEvent);
target.dispatchEvent(newEvent);
});
Вы можете попробовать его здесь: http://jsfiddle.net/NIXin/t2expL6u/1/
То, что я пытаюсь сделать сейчас, - это также передать события касания без особого успеха. Так как мобильные телефоны и сенсорные экраны теперь более популярны, некоторые люди могут захотеть прокручивать их пальцами вместо этого - ни один из предложенных ответов не разрешает это.
Ответ 5
Ну, все решения с js откладываются при прокрутке на нем. если фиксированный элемент, который вы используете, предназначен только для отображения, то для этого у меня есть хорошие трюки css.
сделать фиксированный элемент z-index:-1
и элемент контейнера background-color:transparent
здесь вы можете увидеть jsfiddle: https://jsfiddle.net/LeeConan/4xz0vcgf/1/