iPhone上的iOS Safari中的轉換導致意外的行爲

我編寫了這段代碼，讓我的頁腳在向下滾動時淡出，並在向上滾動時淡入淡出。不過，在iPhone上的iOS Safari上（沒有iOS平板電腦，因此無法檢查），它會很好地發揮作用，這會導致淡化發生多次。我注意到在一次下滾時，連續發生3到5次淡出。將淡入/淡出變爲向上/向下的上滑可以產生相同的行爲。iPhone上的iOS Safari中的轉換導致意外的行爲

它不會出現在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: ''; 
}

來源

2017-07-22 Lisa

我不知道是什麼原因導致在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偏移量至少30px）。如果所有標準匹配，則相應轉換。隨意微調毫秒和像素值。

來源

2017-07-23 19:07:51

iPhone上的iOS Safari中的轉換導致意外的行爲

回答

相關問題