web移动端：touchmove实现局部滚动

最新推荐文章于 2024-08-09 18:00:00 发布

长安古意

最新推荐文章于 2024-08-09 18:00:00 发布

阅读量1.1w

点赞数 1

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/aiyishengyishi/article/details/53486655

版权

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在web移动端如何实现弹出框滚动时阻止body全局滚动的效果。通过css、html和js三部分详细讲解了实现过程，包括触屏初始坐标获取、移动方向与边界判断，以及防止滑动越界的方法。尽管存在滚动卡顿的问题，但提供了完整的实现思路和代码。

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

总结一下最近项目用到的一个功能点，具体要求如下：
body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件

实现效果图如下：
这里写图片描述

一.css部分

html,body{
    margin:0;
    padding: 0;
}
.btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: .5rem 0;
    background-color: pink;
    text-align: center;
    color: #fff;
    font-weight: 700;
}
.replyCeng{
    display: none;
    position: fixed;
    top:0;
    width:100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.6);
    z-index: 100;
}
.replyContainer{
    background-color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 24rem;
    text-align: center;
    overflow: hidden;
}
.replyList{
    position: absolute;
    top:3.2rem;
    width: 100%;
}
.replyTitle{
    position: absolute;
    top: 0;
    width:100%;
    padding:1.0625rem 0;
    border-bottom:1px solid #e0e0e2;
    z-index: 202;
    color: #575b61;
    font-size: .9375rem;
    font-weight: 700;
    background-color: #fff;
}
.closeReply{
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: .25rem;
    right: .25rem;
    z-index: 202;
    margin: 1rem;
}
.reply-item{
    padding:.9375rem 1.625rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: #666666;
    border-bottom:1px solid #e0e0e2;
}
.replyBtn{
   /* padding: 1.0625rem 1.625rem;*/

    font-size: .9375rem;
    color: #1daffa;
    font-weight: 700;
    width:100%;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    z-index: 202;
    border-top: 1px solid #e0e0e2;
}
.replyBtn div{
    margin: 1.0625rem 1.625rem;
    padding: .6rem;
/*    width: 100%;*/
    border: 1px solid #1daffa;
    border-radius: .3rem;
}

二.html部分

<div>
    <img src="image/langImg.jpg" style="width:100%;height:auto;"/>
</div>
<div class="btn" onclick="replyCengShow()">button</div>
<div class="replyCeng">
    <div class="replyContainer">
        <div class="replyTitle">睡前小贴士</div>
        <img class="closeReply" src="image/close.png" />
        <div class="replyList" id="wrapper">
            <div class="reply-item" onclick="selectReply()">要注意哦，睡觉前不要吃水果，可以适当喝牛奶</div>
            <div class="reply-item">要注意哦，睡觉前不要吃水果，可以适当喝牛奶</div>
            <div class="reply-item">要注意哦，睡觉前不要吃水果，可以适当喝牛奶</div>
            <div class="reply-item">要注意哦，睡觉前不要吃水果，可以适当喝牛奶</div>
            <div class="reply-item">把黑暗的光线试想成大自然的安眠药，从而提示你的身体去大量地制造褪黑激素，这是一种能帮助人平静下来的激素。来自旧金山的专门从事焦虑和失眠的心理学家、心理学博士Steve Orma表示，在入睡前将灯关掉能提高褪黑激素的产量，这样人就会感到倦意。支持这一说法的研究有：2011年发表在《临床内分泌与代谢》期刊上的一篇研究报告表明，在黄昏时刻到睡觉之前暴露在明亮的灯光下会极大地压缩褪黑激素的产量，使人变得极其兴奋。</div>
            <div class="reply-item">把黑暗的光线试想成大自然的安眠药，从而提示你的身体去大量地制造褪黑激素，这是一种能帮助人平静下来的激素。来自旧金山的专门从事焦虑和失眠的心理学家、心理学博士Steve Orma表示，在入睡前将灯关掉能提高褪黑激素的产量，这样人就会感到倦意。支持这一说法的研究有：2011年发表在《临床内分泌与代谢》期刊上的一篇研究报告表明，在黄昏时刻到睡觉之前暴露在明亮的灯光下会极大地压缩褪黑激素的产量，使人变得极其兴奋。</div>
        </div>
        <div class="replyBtn">
            <div>管理</div>
        </div>
    </div>
</div>

三.js部分

1.获得触屏的初始坐标

$(".replyList").on("touchstart",function(e){
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});

2.移动屏幕添加相应事件
touchmove事件的要点主要是移动方向的判断和滑动边界的判断
<1>移动方向的判断

var replyListTop=parseInt($(".replyList").css("top"));
$(".replyList").bind("touchmove",function(e){  
    moveEndX = e.originalEvent.changedTouches[0].pageX;
    moveEndY = e.originalEvent.changedTouches[0].pageY;
    var moveX;
    var moveY;
    moveX=moveEndX-startX;
    moveY=moveEndY-startY;
    //向上滑动
    if(moveY < 0){  
    }
    //向下滑动
    else if(moveY > 0){
    }
});

<2>移动边界的判断
A.向上滑动到上边界

注：replyScrollTop为文中replyListTop

此时replyListTop为负数

canSeeHeight == replyHeight + replyListTop //（此时正好处于边界状态）

如果再往上滑动，我们将会看到越来越少的内容，也就是：

canSeeHeight > replyHeight + replyListTop

于是得到上边界值：

hasTop= canSeeHeight <= $(this).height()+replyListTop ? true:false

B.向下滑动到下边界
这里写图片描述
由于滚动区域是包裹在replyContainer里面的，所以滚动区域的初始top值为标题区域的高度，只要标题区域的高度 == 滚动区域的top值，就代表向下滑动到下边界

hasBottom = 3.2*fontHeight >= replyListTop ? true:false ;//title区域用rem布局，fontHeight为html字体大小

//向上滑动
if(moveY < 0 && hasTop){
    $(".replyList").css("top",replyListTop+"px");
    replyListTop= replyListTop+moveY;
}
//向下滑动
else if(moveY > 0 && hasBottom){
    $(".replyList").css("top",replyListTop);
    replyListTop= replyListTop+moveY;
}

<3>限制滑动过大越界

//向上滑动
if(moveY < 0 && hasTop){
    $(".replyList").css("top",replyListTop+"px");
    replyListTop= replyListTop+moveY;
    //判断加上移动后的位置是否越界，如果越界，以边界值为top值
    replyListTop= canSeeHeight <= ($(this).height()+replyListTop) ? replyListTop : (-Math.abs($(this).height()-canSeeHeight));
}
//向下滑动
else if(moveY > 0 && hasBottom){
    $(".replyList").css("top",replyListTop);
    replyListTop= replyListTop+moveY;
    //判断加上移动后的位置是否越界，如果越界，以边界值为top值
    replyListTop= 3.2*fontHeight >= replyListTop ? replyListTop : 3.2*fontHeight;
}

<4>js完整代码

function replyCengShow(){
    var startX;
    var startY;
    var moveEndX;
    var moveEndY;
    var testLeft;
    var fontHeight=parseInt($("html").css("fontSize"));
    $(".replyCeng").css("display","block");
    $('body').bind("touchmove",function(e){  
            e.preventDefault();  
        });
    $(".replyList").on("touchstart",function(e){
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });

    var replyListTop=parseInt($(".replyList").css("top"));
    $(".replyList").bind("touchmove",function(e){  
        moveEndX = e.originalEvent.changedTouches[0].pageX;
        moveEndY = e.originalEvent.changedTouches[0].pageY;
        var moveX;
        var moveY;
        moveX=moveEndX-startX;
        moveY=moveEndY-startY;

        canSeeHeight=$(".replyContainer").height()-($(".replyBtn").height()+2.125*fontHeight);
        hasTop= canSeeHeight <= $(this).height()+replyListTop ? true:false
        hasBottom = 3.2*fontHeight >= replyListTop ? true:false ;
        //向上滑动
        if(moveY < 0 && hasTop){
            $(".replyList").css("top",replyListTop+"px");
            replyListTop= replyListTop+moveY;
            replyListTop= canSeeHeight <= ($(this).height()+replyListTop) ? replyListTop : (-Math.abs($(this).height()-canSeeHeight));
        }
        //向下滑动
        else if(moveY > 0 && hasBottom){
            $(".replyList").css("top",replyListTop);
            replyListTop= replyListTop+moveY;
            replyListTop= 3.2*fontHeight >= replyListTop ? replyListTop : 3.2*fontHeight;
        }
    });

    $(".closeReply").unbind("click").bind("click",function(){
        $(".replyCeng").css("display","none");
        $('body').unbind("touchmove");
    });
}