Jquery鼠标滚轮事件在移动设备上不起作用

Question

使用鼠标滚轮实现英雄标题效果，但在移动设备上不起作用。触摸滚动是滚动英雄标题后面的内容，而不是触发鼠标滚轮效果……任何如何解决这个问题的想法都将不胜感激！

$('.sd').click(function () {
    $('.hero, .content').addClass('scrolled');
});

$('.hero').mousewheel(function (e) {
    if (e.deltaY < 0) {
        $('.hero, .content').addClass('scrolled');
        return false;
     }
});
$(window).mousewheel(function (e) {
    if ($('.hero.scrolled').length) {
        if ($(window).scrollTop() == 0 && e.deltaY > 0) {
            $('.hero, .content').removeClass('scrolled');
        }
    }
});

下面的CSS :不确定是不是CSS中的某些东西是问题所在，所以我把它包含在下面。我想知道是否可能与定位或z索引有关，但不能确定……

.hero{
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9;

    transition: all 1.6s cubic-bezier(0.86, 0, 0.07, 1);
            @media (max-width: 740px){
            height: 100vh;
            z-index: -1;
        }
}
.hero.scrolled{
    transform: translate3d(0, -100%, 0) scale(.75);
    opacity: 0;
}
.hero-inner{
    background-image: url(../../assets/plymouth.jpg);
    background-size: cover;
    background-position: center;
    // display: table;
    // width: 100%;
    // height: 100vh;
    // position: fixed;
    // top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left:0;
    justify-content: center;

}
.hero-title{
    // display: table-cell;
    // vertical-align: middle;  
    // text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    // margin-top: 10%;
}
h1, h2, h3, h4, h5, h6{
    font-family: montserrat;
}
.font-2{
    font-family: 'josefin sans';
    font-weight: 700;
}
.title{ letter-spacing: .3em; text-transform: uppercase; }
.text-light{ color: #fff }
.font-alt{
    font-family: 'georgia';
    font-style: italic;
    color: #666;
}
.hero{
    overflow: hidden;
    z-index: 1;
}
.content{
    position: relative;
    background-color: #fff;
    // border-top: 1rem solid black;
    padding: 0; 
    margin-top: 2rem;
    transition: all 1.6s cubic-bezier(0.86, 0, 0.07, 1);
    transform: translate3d(0, 20px, 0) scale(.75);
    opacity: 0;
}
.content.scrolled{
    transform: translate3d(0, 0, 0) scale(1);   
    opacity: 1;
}
.sd{
    color: #fff;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.sd:hover, .sd:focus{
    color: #fff;
    opacity: .7;
    text-decoration: none;
}

Answer 1

您需要使用JQuery滚动，因为移动设备没有鼠标滚轮。我写了一个简单的示例来演示如何触发scroll事件。-删除$("window")前后的引号

$(window).scroll(function() {
    if ($('.hero.scrolled').length) {
        if ($(window).scrollTop() == 0 && e.deltaY > 0) {
            $('.hero, .content').removeClass('scrolled');
        }
    }
});

或者用于在特定元素上滚动：

$(".hero").scroll(function() {
  console.log("scrolled");
});

如果你有任何问题，请在评论中提问。你的问题也可能与滚动无关，而是一些不同的东西。如果你告诉我你到底想实现什么也许会有所帮助