通过固定内容传递鼠标滚轮事件 [英] Pass mousewheel event through fixed content

问题描述

了解这一点的最佳方法是查看这个小提琴。

The best way to understand this is to look at this fiddle.

注意红色框中固定内容上的鼠标滚轮什么都不做。我想滚动的可滚动div。

Notice how mouse wheel over the fixed content in the red box does nothing. I would like the scrollable div to scroll.

如果小提琴死了 - 基本上我有一个可滚动的div，上面有固定元素。通常，当鼠标滚过可滚动的div时，它当然会滚动。但是如果你超过了固定元素，那么就不会发生滚动。根据您的站点布局，这可能对用户来说是直观的。

In case the fiddle dies - basically I have a scrollable div with a fixed element over it. Typically when you mouse wheel over a scrollable div it will of course scroll. But if you are over the fixed element instead then no scroll happens. Depending on your site layout this could be counter intuitive to a user.

jQuery解决方案没问题。

jQuery solutions are okay.

推荐答案

我认为这就是你所要求的！

I think this does what you're asking for!

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

编辑：将jsFiddle链接更新为实际可用的链接

DOUBLE EDIT：最好免除进一步测试的.animate（）...

jsFiddle示例

Updated the jsFiddle link to one that actually works
DOUBLE Best to dispense with the .animate() on further testing...
jsFiddle Example

TRIPLE编辑：
相当不太漂亮（页面上有很多元素可能会非常慢），但这很有效我欠了很多此stackoverflow答案。

TRIPLE Much less pretty (and will probably be horribly slow with a lot of elements on the page), but this works and I owe a lot to this stackoverflow answer.

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

}

这篇关于通过固定内容传递鼠标滚轮事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！