Question

我有几个部分（每个部分都是100％x 100％ - 全屏），它们是固定的，并且使用z-index重叠在一起。我想检测鼠标滚动并使用jQuery显示相应的部分（基本上，像fullpage.js，但我将有不同的动画）。我阅读了很多问题并尝试了下面的代码，但是没有用。

使用Javascript：

$(document).ready(function(){
    sections=["intro","features","gallery","contact"]
    cs=0;
    $(window).on('mousewheel DOMMouseScroll', function(e){
        if(e.originalEvent.detail > 0) {
            //scroll down - Show next section
            if(cs < (sections.length-1)){
                $("#"+sections[cs]).fadeOut();
                cs+=1;
                $("#"+sections[cs]).fadeIn();
            }
        }
        else{
            //scroll up - Show previous section
            if(cs > 0){
                $("#"+sections[cs]).fadeOut();
                cs-=1;
                $("#"+sections[cs]).fadeIn();
            }
        }
        return false;
    });
});

HTML：

<section id="intro">
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>
<section id="features">
    <div class="content">
        <h1>Features</h1>
    </div>
</section>
<section id="gallery">
    <div class="content">
        <h1>Gallery</h1>
    </div>
</section>
<section id="contact">
    <div class="content">
        <h1>Contact Us</h1>
    </div>
</section>

要查看整个代码，以备您需要，visit github

Answer 1

所以我检查了jsfiddle https://jsfiddle.net/oobmky4n/中的行为，基本上你的问题似乎就是那个

e.originalEvent.deltaY

始终为0，而您想要使用

isScrolling

我现在只在safari中测试它，但它似乎工作。似乎也反映在https://developer.mozilla.org/en-US/docs/Web/Events/wheel

上

在连续滚动期间添加停止：

可能的解决方案是超时标志。我在这里更新了原文：https://jsfiddle.net/oobmky4n/2/ 如您所见，一旦成功滚动发生，我们就会设置if(isScrolling) { clearTimeout(resetScroll) resetScroll = setTimeout(function() { isScrolling = false }, 250); }。在设置标志后不滚动250ms后，我们恢复到非滚动状态。

$(document).ready(
function(){

/**
* this is used to update our view so you see what we are   * doing currently now
*/
function updateView(value){
$("#view").html(value);
}

$(".sum").click(function(event){
//we get our value to multiply our value with 
var multiply = $(this).attr("multiply"); 
var value = $(this).val();

//we multiply here 
var answer = multiply*value;

//we sum up this value with the sum in the hidden fied if checked else substract

var sumField = $("#sum");

if($(this).is(':checked')){
sumField.val(Number(sumField.val())+answer);
}else{
sumField.val(Number(sumField.val())-answer);
}

//update our view
updateView(sumField.val());
});



} 
);

jQuery鼠标滚轮检测向上和向下滚动

1 个答案: