Пропустить событие mousewheel через фиксированный контент - PullRequest
Новая
       10

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

16 голосов
/ 25 августа 2011

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

Обратите внимание, что колесо мыши над фиксированным содержимым в красном поле ничего не делает. Я хотел бы, чтобы прокручиваемый div прокручивал.

На случай, если скрипка умрет - в основном у меня есть прокручиваемый div с фиксированным элементом над ним. Как правило, когда вы наводите курсор мыши на прокручиваемый div, он, конечно, прокручивается Но если вместо этого вы находитесь над фиксированным элементом, прокрутка не происходит. В зависимости от макета вашего сайта это может быть нелогичным для пользователя.

Решения jQuery в порядке.

Ответы [ 5 ]

11 голосов
/ 25 августа 2011

Намного, намного проще, но гораздо реже поддерживается, ответ следующий: 

#fixed{ pointer-events:none; }

jsFiddle
В IE вообще не работает, хотя, к сожалению! Но вы можете использовать modernizr или somesuch, чтобы определить, поддерживается ли он, и использовать jQuery в качестве временного интервала, где его нет.

Предоставлено Домиником Стаббсом

8 голосов
/ 21 мая 2013

У меня была эта проблема, и она работает для меня (с помощью 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/

5 голосов
/ 25 августа 2011

Я думаю, что это то, о чем вы просите! 

$('#fixed').bind('mousewheel', function(e){
     var scrollTo= (e.wheelDelta*-1) + $('#container').scrollTop();
    $("#container").scrollTop(scrollTo);
});

РЕДАКТИРОВАТЬ: Обновлена ​​ссылка jsFiddle на ту, которая действительно работает
ДВОЙНОЕ РЕДАКТИРОВАНИЕ: лучше всего обходиться без .animate () надальнейшее тестирование ...
jsFiddle Пример

РЕДАКТИРОВАНИЕ В ТРАЙЛЕ: гораздо менее симпатично (и, вероятно, будет ужасно медленным с большим количеством элементов на странице), , но этоработает , и я многим обязан этому ответу stackoverflow . 

$('#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;

}

4 голосов
/ 05 декабря 2014

ОБНОВЛЕНИЕ (август 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/

То, что я пытаюсь сделать сейчас, это также передать сенсорные события, но без особого успеха.Поскольку мобильные телефоны и сенсорные экраны в настоящее время более популярны, некоторые люди, возможно, захотят прокручивать их пальцами - ни один из предложенных ответов не решает этого.

0 голосов
/ 26 августа 2016

Ну, все решения с js отчасти задерживаются при прокрутке на нем. если используемый вами фиксированный элемент предназначен только для отображения, то у меня есть хорошие приемы CSS для этого.

делает фиксированный элемент z-index:-1 и элемент контейнера background-color:transparent вот jsfiddle, который вы можете увидеть: https://jsfiddle.net/LeeConan/4xz0vcgf/1/

...