HTML模拟微信下拉页面代码

    2020-03-10 10:55:13

    发表时间:

    HTML模拟微信下拉页面代码如下:

    <!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> 您访问的是 </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>

    KEYAN编码网址解码

    · END ·

    关键词:模拟微信下拉页面,HTML代码 标签:模拟微信下拉页面HTML代码

    以上内容来源本站

文章推荐:

最新 工具

HTML模拟微信下拉页面代码

发表时间:2020-03-10 10:55:13

HTML模拟微信下拉页面代码如下:

<!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> 您访问的是 </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>

· END ·

关键词: 标签:

以上内容来源本站

//评论数 //参与数

博主简介 - 广告合作 - 文章投稿 - 故事文摘 - 典范条目 - 博主新闻

 百科创建更新

网站地图

 

© 2020 blog.dgso.cn 赵彦彬博客 吉ICP备17000796号-1