Question

我编写了这段代码，让我的页脚在向下滚动时淡出，在向上滚动时淡入淡出。然而，它在iPhone上的iOS Safari上运行得相当不错（没有iOS平板电脑因此无法检查）它会导致多次出现淡入淡出。我注意到在一个向下滚动中连续3到5次淡出。将淡入/淡出更改为向上/向下滑动会产生相同的行为。

iPhone上的iOS chrome，Android设备上的chrome，OSX笔记本电脑上的safari或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;

});

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

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

1 个答案: