检测 100% 高度的滚动已修复 div

Question

我的网站上有一个 100% 高 x 100% 宽的固定主容器，我想在其中检测滚动事件。页面结构可以描述为带有固定活动幻灯片和非活动幻灯片的滑块，绝对位于主容器下方。当我身边有一个寻呼机时，我就可以完美地工作了。问题是，我还希望用户能够仅使用鼠标滚动在幻灯片之间切换（向下滚动时转到下一张幻灯片，然后向下滚动显示上一张幻灯片，同时向上滚动）。有什么办法可以让我的页面结构保持原样吗？ fiddle 可以在这里找到：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 属性的原因 - 我希望网站类似于幻灯片放映并使用滚动 up/scroll 向下事件就像 up/down 箭头).

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

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 3

您可以尝试以下方法：

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

参见fiddle：http://jsfiddle.net/audetwebdesign/682opyoz/

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

参考：Get mouse wheel events in jQuery?

注：

如果幻灯片超过两张，此方法可能会变得复杂。

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

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

您需要确保能够以跨浏览器的稳健方式检测 scroll-up/down。

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

Answer 4

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

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

Answer 5

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

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

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

检测 100% 高度的滚动已修复 div

Detect scroll in 100% height fixed div

html

css

jquery

scroll