iPhone 上 iOS Safari 中的过渡会导致意外行为

Posted 2023-03-14

【中文标题】iPhone 上 iOS Safari 中的过渡会导致意外行为

【英文标题】：Transitions in iOS Safari on iPhone causes unexpected behavior

【发布时间】：2017-07-22 23:27:58

【问题描述】：

我编写了这段代码，让我的页脚在向下滚动时淡出，在向上滚动时淡入。它工作得很好，但是，在 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: '';

【参考方案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 像素）。如果所有条件都匹配，则相应地进行转换。随意微调毫秒和像素值。