移动端的页面很多时候在本地和真机上的表现是不一样的，所以写出的页面需要真机上查看，所以使用gulp再本地搭建服务器就可以实现了（在之前项目的基础上做的修改）
设置端口
1 const gulp = require(‘gulp‘); 2 const connect = require(‘gulp-connect‘); 3 const open = require(‘gulp-open‘); 4 5 const rootPath=‘./‘; 6 gulp.task(‘serve‘,function () { 7 connect.server({ 8 root:rootPath, 9 livereload:true, 10 port:5000, 11 host: ‘172.16.2.97‘ 12 }); 13 open(‘http://localhost:5000‘); 14 });
命令 gulp就可以运行项目了
来源：https://blog.csdn.net/qq_39635302/article/details/79477596
<div class="containBox no-scrollbar"> <div> 滚动的内容 </div> </div>
1 //清除滚动条 2 .no-scrollbar::-webkit-scrollbar{ 3 width: 0; 4 height: 0; 5 } 6 7 //滚动容器 8 .containBox{ 9 width: 100%; 10 position: absolute; 11 top: 50px; 12 left: 0; 13 right: 0; 14 bottom: 50px; 15 overflow-x: hidden; 16 /*overflow-y:auto;//不能写,会和下面的产生冲突*/ 17 -webkit-overflow-scrolling: touch; 18 }
但是出现了一个问题，先看页面结构
<body> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </body>
上下都是定位元素，中间的区域滚动，结果就是滚动时遮挡住了上面和下面的固定元素 ，比较麻烦的是每次修改后要查看效果还得要服务端上线，所以本地起了一个服务器，果然这样用起来很爽。
现在问题解决了，但是到底什么原因导致的还不是很清楚，说下解决办法：
其实把body上的样式 overflow-x: hidden;-webkit-overflow-scrolling:touch; 去掉就可以了，只需要在滚动区域content上添加滚动效果。具体原因不是很清楚，猜测是因为在滚动区域写了固定定位元素的问题
cookie能设置有效期但是不能缓存对象数组，且存储控件小
storage能缓存对象，但是不能设置有效期
[...Array(3).keys()] // [0, 1, 2]
原文：https://www.cnblogs.com/shuran/p/10871320.html