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

$("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 mousewheel事件无法在移动设备上运行

1 个答案: