js使用scroll下拉刷新

为什么80%的码农都做不了架构师？>>>   

<script>
    /*更新
    $(function(){
        $(window).scroll(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();

            if(scrollTop == 0){
                window.location.reload();
            }
        })
    })
    */
    $(function(){
        var mainScroll=document.querySelector('.main');
        var startY = 0;

        mainScroll.addEventListener('touchstart',function(e) {
            startY = e.touches[0].pageY;
        })
        mainScroll.addEventListener("touchmove",function (e) {
            var scrollPageY = e.touches[0].pageY - startY;
            if (isTop() && scrollPageY > 0 && scrollPageY < 70) {
                console.log("下拉了");
                if($('.scrollTxt').length === 0){
                    $("<div class='scrollTxt'>释放立即刷新...</div>").insertAfter(".menus");
                }
                mainScroll.style.transform ="translateY(" + scrollPageY +"px)";
                mainScroll.style.transition = "all ease 0.1s";
            }
        })
        mainScroll.addEventListener("touchend",function () {
            if (isTop()) {
                console.log("刷新");
                $('.scrollTxt').html("正在刷新...");
                setTimeout(function () {
                    mainScroll.style.transform ="translateY(0px)";
                    window.location.reload();
                },1000)
            }
        })
        function isTop() {
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            return t === 0 ? true: false;
        }
    })
</script>

 

转载于:https://my.oschina.net/saulc/blog/3013519