Пропустить событие "колесико" через фиксированный контент

Лучший способ понять это - посмотреть эту скрипту.

Обратите внимание, что колесико мыши над фиксированным контентом в красном поле ничего не делает. Мне нужно прокручивать прокручиваемый 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/