检测 100% 高度固定 div 中的滚动

Question

我的网站上有一个 100% 高度 x 100% 宽度的固定主容器，我想在其中检测滚动事件。页面结构可以描述为一个滑块，其中固定的活动幻灯片和非活动幻灯片绝对位于主容器下方。当我有一个寻呼机时，我让它工作得很好。问题是，我还希望用户能够仅使用鼠标滚动在幻灯片之间切换（向下滚动时转到下一张幻灯片，然后向下滚动显示上一张幻灯片，同时向上滚动）。有什么办法可以做到，保持我的页面结构不变？小提琴可以在这里找到：http://jsfiddle.net/tts4nhun/1/（这只是一个快速的娱乐，我认为在 css 中有些东西是不必要的，但就这个问题的内容而言，它们并没有真正改变任何东西）。

HTML：

<div class="wrapper">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
</div>

CSS：

.wrapper {
    position:absolute;
    background:red;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow:hidden;
}

.slide {
    width:100%;
    height:100%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.slide-1 {
    position:fixed;
    top:0;
    left:0;
    background:blue;
} 

.slide-2 {
    position:absolute;
    top:100%;
    left:0;
    background:green;
}

.slide-2.active { 
    position:fixed;
    top:0;
    left:0;
} 

jQuery :

$('.slide-1').click(function(){
    $('.slide-2').addClass('active');
});

我问的不是检查用户是向下滚动还是向上滚动，而是他们是否确实这样做了。

如果您有任何建议，我将不胜感激。 谢谢， E.

e：为了澄清，我希望禁用滚动本身（用户不应该能够以传统方式向下滚动网站）。我想检测滚动事件的原因是，我想在一次向下或向上滚动时交换活动类。 （这也是我想要保留 overflow:hidden 属性的原因 - 我希望网站类似于幻灯片，并像向上/向下箭头一样使用向上/向下滚动事件）。

Answer 1

对于 Chrome 和 Firefox：

$(window).on('mousewheel DOMMouseScroll', function(e){
    if(e.originalEvent.detail > 0) {
        //scroll down
        $('.slide-1').removeClass('active');
        $('.slide-2').addClass('active');
    }else {
        //scroll up
        $('.slide-1').addClass('active');
        $('.slide-2').removeClass('active');
    }
    //prevent page fom scrolling
    return false;
});

我不确定，但 Jason 是对的，mousewheel 事件也值得关注。不过，我认为您会在 IE 上遇到这些解决方案的问题。

如果你只有两张幻灯片（滚动的方向无关紧要），你也可以考虑这样的事情：

$(window).on('mousewheel DOMMouseScroll', function(e){
    $('.slide').toggleClass('active');
    //prevent page fom scrolling
    return false;
});

更新：好的，我很无聊，所以现在我做了这个（也许我应该说我对这个效果需要看起来像什么做出了自己的假设，所以滑动不一定是理想的，但我就像它切换一样）：

$(".slide-1").slideDown();
$(window).on('DOMMouseScroll mousewheel', function(event) {
  $(".slide-1").slideToggle();
  $(".slide-2").slideToggle();
});

.wrapper {
  position: absolute;
  background: red;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.slide-1 {
  background: blue;
}
.slide-2 {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="slide slide-1"></div>
  <div class="slide slide-2"></div>
</div>

Answer 2

您可以尝试以下方法：

$(".wrapper").on('mousewheel DOMMouseScroll', function (event) {
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        $('.slide-2').addClass('active');
    } else {
        $('.slide-2').addClass('active');
    }
});

见小提琴：http://jsfiddle.net/audetwebdesign/682opyoz/

可能存在一些跨浏览器问题，您需要确保用户可以返回到幻灯片 1。

参考：Get mouse wheel events in jQuery?

注意：

如果您有两张以上的幻灯片，这种方法可能会变得复杂。

就检测鼠标滚轮事件而言，您可能需要编写自己的侦听器，如下所述：

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

您需要确保能够以跨浏览器稳健的方式检测向上/向下滚动。

然后，您需要知道您在哪张幻灯片上，并根据需要向上/向下显示下一张。

Answer 3

http://jsfiddle.net/tts4nhun/8/

这适用于 IE9 和 Chrome。我没有火狐。告诉我。

    $(window).on('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        $(".slide-2").removeClass("active");
        $(".slide-2").animate({top: "100%"},500,"linear");
    }
    else {
        $(".slide-2").addClass("active");
        $(".slide-2").animate({top: "0"},500,"linear");
    }
});

Answer 4

似乎下面的插件解决了我让它在所有浏览器上工作时遇到的所有问题。

http://www.ogonek.net/mousewheel/jquery-demo.html

Answer 5

或者你可以像这样简单地使用 vanilla JavaScript：

window.addEventListener('wheel', function(e) {
    direction = e.deltaY

    if (direction > 0) {
        console.log('scrolling up')
    }else{
        console.log('scrolling down')
    }
})