鍍金池/ 問答/HTML/ 移動端window.onscroll無效

移動端window.onscroll無效

<script>
    

    
    var stickyEl = document.querySelector('.pannle-label');
    
    
    function fixed() {
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        //判斷系統(tǒng)
        if(isAndroid) {
                console.log('isAndroid')
                window.onscroll = function() {
                console.log(2222);
                var scrollT = document.documentElement.scrollTop||document.body.scrollTop;                
                if (scrollT > 160) {
                    $(stickyEl).addClass('fixed-top');
                }else {
                    $(stickyEl).removeClass('fixed-top');
                }
                };
                
        }else if(isiOS) {
            console.log('isiOS');
            $(stickyEl).addClass('sticky');
            
        }
    }
    fixed();

        
    
    </script>

如上代碼所示ios上的效果是有的,但在安卓上有問題我列個問題列表看看

  1. 我在滾動的時候控制臺并沒有輸出2222
  2. 我也看到好像是有css的overflow的問題但我并不清楚具體
  3. css眾我把滾動條的display:none;有可能是這個問題嗎

求解??!

回答
編輯回答
壞脾滊

我用Chrome模擬ios和安卓設(shè)備沒問題啊,Android設(shè)備能打印出 isAndroid2222,ios打印isIOS,我是直接用<div style="width: auto; height: 7000px;" class="panel-label"></div>這個測試的

2017年6月3日 05:11
編輯回答
我以為

看起來好像是一個吸頂?shù)牟藛涡Ч?br>猜測是瀏覽器內(nèi)核進(jìn)行了滾動時動作的優(yōu)化,導(dǎo)致在滾動過程中onscroll被掛起~

ps:
這個代碼,如果iOS執(zhí)行安卓那部分,貌似也有問題。
這個電腦端chrome模擬不出來的~
你看手機(jī)端京東、淘寶什么的都用了這個效果,你在他們的客戶端里面執(zhí)行,也會得到和他們效果一樣的結(jié)果

一般的解決方案:因?yàn)榧嫒菪詥栴},不用這種布局方式(2333)。
CSS屬性里的position:sticky安卓也可以用,但是即便加了-webkit前綴,也有一些瀏覽器內(nèi)核不支持
或者是在onscroll方法下面阻止瀏覽器的默認(rèn)行為,改用iscroll這樣的工具js,但是這樣的話,你需要自己去實(shí)現(xiàn)滾動效果,性能會差很多~

2017年7月25日 17:05