HTML 下拉刷新&禁止微信下拉_html 关闭下拉刷新-CSDN博客

本文链接：https://blog.csdn.net/u014563888/article/details/102837364

本文介绍了一个移动端网页的交互实现方案，包括上拉加载更多内容与下拉刷新功能。通过监听触摸事件和页面滚动状态，实现平滑的过渡效果和功能逻辑。文章深入解析了CSS过渡和JavaScript事件监听的综合运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   .gd{
       transition: all .5s;
       -moz-transition: all .5s;	/* Firefox 4 */
       -webkit-transition: all .5s;	/* Safari 和 Chrome */
       -o-transition: all .5s;	/* Opera */
   }
     <div id="top" class="gd" style="display: none;">

        <span class="loading"> 上拉加载</span>
        <div class="load gd"   style="display: none;" >
            <div style="display:flex;justify-content: center;align-items: center;height:0.8rem;">
                <img style="width:0.3rem;" src="/static/mobile/images/weibo/load.gif" alt=""> &nbsp;加载中
            </div>
        </div>
    </div>
       $(document).ready(function(){
        var is_tap = false;
        var top = 0;
        var end = 0;
        var h = 0;
        var is_shuaxin = false;
        var max_h =    window.screen.height*0.1
        var touchstartY;
        $("#data").on('touchmove', function(e) {
            if($(document).scrollTop() == 0 && is_tap == true && data.page == 1){
                end = e.changedTouches[0].clientY;
                h = (end-top)/2;
                if( h > max_h){
                    h = max_h;
                    is_shuaxin = true;
                }
                $('#top').removeClass('gd');
                $('#top').attr('style','display: flex;align-items: center;align-items: center; justify-content: center; color:#999;');
                $('.loading').show();
                $('.load').hide();
                $('#top').css('height',h+"px");

            }else{
                is_tap = false;
                $('#top').hide();

            }


            var events = e.touches[0] || e;
            //注意app.scrollTop始终为0
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //获取滚动部分的高度
            var clientHeight = document.documentElement.clientHeight; //获取手机屏幕高度（可视部分高度）
            var scrollHeight = document.scrollHeight; //所有内容的高度
            if (
                events.clientY > touchstartY &&
                scrollTop === 0 &&
                e.cancelable
            ) {

                e.preventDefault(); //禁止到顶下拉
            } else if (
                scrollTop + clientHeight > scrollHeight &&
                e.cancelable
            ) {
                // event.preventDefault(); //禁止到底上拉
            }
        });
        $("#data").on('touchstart', function(e) {
            if($(document).scrollTop() == 0 && data.page == 1 ){
                is_tap = true;
                top = e.changedTouches[0].clientY;

            }

            var events = e.touches[0] || e;
            touchstartY = events.clientY; //获取触摸目标在视口中的y坐标

        });
        $("#data").on('touchend', function(e) {
            if($(document).scrollTop() == 0 && data.page == 1 ){
                is_tap = false;
                $("#top").attr('class','gd');

                if(is_shuaxin == true && data.page == 1){
                    $('#top').css('height',"0.8rem");

                }else{

                    $('#top').css('height',"0px");
                }


            }

        });
        $('#top').on('webkitTransitionEnd', function(e) {
            $(".loading").hide();
            $('.load').show();
            if(is_shuaxin == true){

              //加载逻辑
            }

            }else{
                $('#top').hide();
            }
        });