javascript - iPhone 上 iOS Safari 中的转换会导致意外行为

Question

我编写这段代码是为了让我的页脚在向下滚动时淡出，在向上滚动时淡入。它工作得很好，但是，在 iPhone 上的 iOS Safari 上(没有 iOS 平板电脑所以无法检查)它会导致多次出现褪色。我注意到一次向下滚动时淡出连续发生 3 到 5 次。将淡入/淡出更改为向上/向下滑动会产生相同的行为。

它不会出现在 iPhone 上的 iOS chrome、Android 设备上的 chrome、safari 或我的 OSX 笔记本电脑上的 chrome 上。似乎是与 iOS Safari 相关的问题。

什么可能导致这种意外行为？我正在使用 jquery 3.2.1。

"use strict";
var prevYOffSet = 0;

$(window).scroll(function (event) {
    var yOffset = window.pageYOffset;

    if (yOffset < 50) {
        return;
    }
    if (yOffset > prevYOffSet) {
        $('#cv-nav-wrap').fadeOut(500);
    } else {
        $('#cv-nav-wrap').fadeIn(500);
    }
    prevYOffSet = yOffset;
});

HTML代码:

<div id="cv-nav-wrap" class="cv-menu center-x nav-down">
    <div id="nav-anchor"></div>
    <nav id="cv-nav">
        <ul id="cv-ul">
            <li class="cv-li">
                <a href="#info-sec">
                    <p>Information</p><img class="svg" src="img/cv-icons/cv-23.svg">
                </a>
            </li>
            <li class="cv-li">
                <a href="#skill-sec">
                    <p>Proficiencies</p><img class="svg" src="img/cv-icons/cv-15.svg">
                </a>
            </li>
            <li class="cv-li">
                <a href="#exp-sec">
                    <p>Experience</p><img class="svg" src="img/cv-icons/cv-20.svg">
                </a>
            </li>
            <li class="cv-li">
                <a href="#cd-timeline">
                    <p>Education</p><img class="svg" src="img/cv-icons/cv-12.svg">
                </a>
            </li>
            <span class="cv-stretch"></span>
        </ul>
    </nav>
</div>

这是属于 div 的 css:

div#cv-nav-wrap {
    width: 100%;
    text-align: center;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    /*background: #2b2b2b;*/
    border-top: 1px dotted rgba(0, 0, 0, 0.2);
    background: #000;
    -webkit-box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.1);

    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

div#cv-nav-wrap::before {
    display: block;
    content: '';
}

Answer 1

我不知道是什么导致了 iOS 上的 safari 行为，但我试了一下，发现你可以通过延迟转换来修复它:

"use strict";

var prevYOffSet = 0;
var didScroll = false;
var scrollDir = '';

window.setInterval(checkScrolled, 500);

function checkScrolled() {
    if (!didScroll) {
        return;
    }

    if (scrollDir === 'down') {
        $('#cv-nav-wrap').slideUp(500);
    } else if (scrollDir === 'up') {
        $('#cv-nav-wrap').slideDown(500);
    }
}

$(window).scroll(function (event) {
    var yOffset = window.pageYOffset;

    if (yOffset < 50) {
        return;
    }

    scrollDir = yOffset > prevYOffSet ? 'down' : 'up';

    if (scrollDir === 'down') {
        if (yOffset < prevYOffSet + 30) {
            return;
        }
    } else if (scrollDir === 'up') {
        if (yOffset > prevYOffSet - 30) {
            return;
        }
    }

    didScroll = true;
    prevYOffSet = yOffset;

});

每隔 500 毫秒，一个函数会检查是否有滚动、滚动的方向以及它是否是一个有趣的滚动(距离最后一个 Y 偏移至少 30 像素)。如果所有条件都匹配，则相应地转换。随意微调毫秒和像素值。