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

Question

将鼠标滚轮用于英雄 header 效果，但它不适用于移动设备。触摸滚动正在滚动英雄 header 后面的内容，而不是触发鼠标滚轮效果...任何解决此问题的想法将不胜感激！

$('.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-index 有关，但不能确定...

.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 滚动，因为移动设备没有鼠标滚轮。我给你写了一个关于如何触发滚动事件的简单演示。 - 删除了 $("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");
});

有什么问题就在评论里问吧。您的问题也可能与滚动无关，但有所不同。如果你向我展示你想要实现的目标，也许会有帮助

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

Jquery mousewheel event not working on mobile

css

jquery

jquery-events