禁止微信自带下拉，然后内部的内容可以滚动。

最新推荐文章于 2021-06-04 22:07:07 发布

置顶～～刘杨

最新推荐文章于 2021-06-04 22:07:07 发布

阅读量1.5k

点赞数 2

分类专栏：微信文章标签：微信默认下拉移动端

本文链接：https://blog.csdn.net/qq_26626159/article/details/90769677

版权

微信专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

</head>
<body>
<button id="pastePull">点击</button>
<div id="d">123</div>
<div class="div" id="div">
    <!--<iframe id="iframe1" name="iframe" height="500" width="100%" style="width: 100%;height: 100%;overflow: auto" src='http://player.youku.com/embed/XNDE4NzA4MzkzNg==' frameborder=0 ></iframe>-->

    <div class="iframeHove"  id="iframeHove" style="opacity: 0.5"><span>浏览</span></div>
</div>

<style>
    .div{
        width: 510px;
        height: 500px;
        position: absolute;
        top: 100px;
        overflow: auto;
        left: 100px;
        background: red;
    }
    .iframeHove{
        width: 120px;
        height: 700px;
        background-color: darkblue;
        border-radius: 6px;
        line-height: 48px;
        font-size: 18px;
        text-align: center;
        position: absolute;
        color: white;
        top: 0px;
        left: 100px;
        transform: scale(1);
        transform-origin: 0 0;
        /*-webkit-transform: ;*/
    }
    .iframeHove span{
        opacity: 0.7;
    }
    .iframeHove span:hover{
        opacity: 1;
    }
</style>
<script>

        document.addEventListener('touchmove',scrollFunc,{passive: false});
        document.getElementById("iframeHove").addEventListener('touchstart',function (e) {
            _y=e.touches[0].pageY;
        })
            document.getElementById("iframeHove").addEventListener('touchmove',function (e) {


            if(document.body.scrollTop<0){
                e.preventDefault();

            }else{
               if(document.body.scrollTop===0){
                   if(document.getElementById("div").scrollTop===200){ //内部内容滑动的最大值
                       if(e.touches[0].pageY>_y){
                           e.stopPropagation()

                       }

                   }else {
                       if(e.touches[0].pageY<_y){
                           e.stopPropagation()

                       }
                       if(document.getElementById("div").scrollTop>0){
                           e.stopPropagation()

                       }

                   }



               }else{
                   e.stopPropagation()

               }


            }
            document.getElementById("d").innerText=document.getElementById("div").scrollTop;

        },{passive: false});


    function scrollFunc(e) {
       // console.log("111")
e.preventDefault()
e.stopPropagation()
    }


</script>
</body>
</html>