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：为了澄清，我希望禁用滚动本身（用户不应该以传统方式向下滚动网站）。我想检测滚动事件的原因是，我想在单个向下或向上滚动时交换活动类。（这也是我想要保持溢出的原因：隐藏属性 - 我希望网站类似于幻灯片，并使用向上/向下滚动事件，就像上/下箭头一样。）

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;
});

我不确定，但杰森是对的，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。我没有firefox。让我知道。

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

请参阅小提琴：http://jsfiddle.net/audetwebdesign/682opyoz/

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

参考：Get mouse wheel events in jQuery?

注意：

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

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

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

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

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

Answer 4

似乎下面的插件解决了我在所有浏览器中运行时遇到的所有问题。

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

Answer 5

或者您可以像这样简单地使用原始JavaScript：

conda install py-xgboost

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

5 个答案: