通过固定内容传递鼠标滚轮事件

Question

了解这一点的最佳方法是查看this fiddle。

请注意，鼠标滚轮在红色框中的固定内容上没有任何作用。我想让可滚动的 div 滚动。

万一小提琴死了 - 基本上我有一个可滚动的 div，上面有一个固定的元素。通常，当您将鼠标滚轮悬停在可滚动的 div 上时，它当然会滚动。但是，如果您在固定元素上方，则不会发生滚动。根据您的网站布局，这可能对用户来说是反直觉的。

jQuery 解决方案还可以。

Answer 1

一个简单得多，但得到广泛支持的答案如下：

#fixed{ pointer-events:none; }

jsFiddle
不幸的是，在 IE 中根本不起作用！但是你可以使用 modernizr 或类似的东西来检测它是否受支持，并在不支持的地方使用 jQuery 作为权宜之计。

感谢 Dominic Stubbs 先生

Answer 2

我遇到了这个问题，这对我有用（使用 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/

Answer 3

我认为这可以满足您的要求！

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

编辑：将 jsFiddle 链接更新为实际可用的链接
双重编辑：最好在进一步测试时放弃 .animate()...
jsFiddle Example

三重编辑： but this works 和 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;

}

Answer 4

更新（2016 年 8 月）：浏览器实现似乎已更改，不再可能在不同的目标上重新调度 WheelEvent。见讨论here。

对于应该跨平台工作的替代解决方案，试试这个：

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/

我现在要做的也是传递触摸事件，但没有取得多大成功。由于手机和触摸屏现在更流行，有些人可能想用手指滚动 - 所提供的答案都不能解决这个问题。

Answer 5

好吧，所有带有 js 的解决方案在滚动时都有点延迟。如果您使用的固定元素只是为了显示，那么我有一个很好的 css 技巧来实现这一点。

制作固定元素z-index:-1和容器元素background-color:transparent 这是您可以看到的 jsfiddle：https://jsfiddle.net/LeeConan/4xz0vcgf/1/