移动端window.onscroll无效

Question

<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/);
        //判断系统
        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；有可能是这个问题吗

求解！！

Answer 1

我用Chrome模拟ios和安卓设备没问题啊，Android设备能打印出 isAndroid和2222,ios打印isIOS,我是直接用<div style="width: auto; height: 7000px;" class="panel-label"></div>这个测试的

Answer 2

看起来好像是一个吸顶的菜单效果
猜测是浏览器内核进行了滚动时动作的优化，导致在滚动过程中onscroll被挂起~

ps:
这个代码，如果iOS执行安卓那部分，貌似也有问题。
这个电脑端chrome模拟不出来的~
你看手机端京东、淘宝什么的都用了这个效果，你在他们的客户端里面执行，也会得到和他们效果一样的结果

一般的解决方案：因为兼容性问题，不用这种布局方式（2333）。
CSS属性里的position:sticky安卓也可以用，但是即便加了-webkit前缀，也有一些浏览器内核不支持
或者是在onscroll方法下面阻止浏览器的默认行为，改用iscroll这样的工具js，但是这样的话，你需要自己去实现滚动效果，性能会差很多~