纯js实现移动端H5上下翻页

最新推荐文章于 2025-05-08 12:21:36 发布

八月的猪猪

最新推荐文章于 2025-05-08 12:21:36 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：上下滑动翻页移动端

本文链接：https://blog.youkuaiyun.com/qq_42894622/article/details/90548504

个人blog，欢迎关注加收藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>H5-test</title>
<style>
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-callout:none;
}
html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
.page{ background-color:#eee;}
.page{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
.page.hide{ display:none;}
 
/*================