模拟微信下拉页面代码 - 缥缈博客-个人技术博客

特别声明：文章多为网络转载，资源使用一般不提供任何帮助，特殊资源除外，如有侵权请联系！

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
    <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>
    <style>
    body {
        background: #0099EC;
    }
 
    .wechat_from {
        position: fixed;
        background: #303133;
        top: 0;
        left: 0;
        right: 0;
        /*防止 下拉太长 显示 蓝色背景*/
        height: 300px;
        color: #7A7B7D;
        padding: 10px 0;
        font-size: 12px;
    }
 
    #wrapper {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
    }
 
    #container {
        background: #0099EC;
        color: #FFF;
        text-align: center;
    }
    </style>
</head>
 
<body>
    <div class="wechat_from">
        <center>此网页由 缥缈博客 提供</center>
    </div>
    <div id="wrapper">
        <div id="container">
            <br><br><br><br><br><br>
            <br><br><br><br><br><br>
            <h2>下拉试试</h2>
            <p>您访问的是 www.btstu.cn </p>
            <p>下拉显示 由 缥缈博客 提供 </p>
            <br><br><br><br><br><br>
            <br><br><br><br><br><br>
            <br><br><br><br><br><br>
        </div>
    </div>
    <script>
    var myScroll;
 
    function isPassive() {
        var supportsPassiveOption = false;
        try {
            addEventListener("test", null, Object.defineProperty({}, 'passive', {
                get: function() {
                    supportsPassiveOption = true;
                }
            }));
        } catch (e) {}
        return supportsPassiveOption;
    }
 
    window.onload = function() {
        myScroll = new IScroll('#wrapper', { mouseWheel: true });
    }
    document.addEventListener('touchmove', function(e) { e.preventDefault(); }, isPassive() ? {
        capture: false,
        passive: false
    } : false);
    </script>
</body>
 
</html>

本文最后更新于2019-9-23，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

分享到：