IOS禁止下拉滑动怎么设置

转载

柳随风 2024-11-26 19:09:23

文章标签 IOS禁止下拉滑动怎么设置 html javascript scala 文章分类 iOS 移动开发

事件点透是怎么回事？

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height: 200px;
	background: red;
	opacity: .5;
}
</style>
</head>
<body>
<a href="http://www.miaov.com">妙味课堂</a>
<div id="box"></div>	
<script type="text/javascript">
/*
	移动端支持鼠标事件，但是会有300ms的延迟
	事件点透:
		当我们在屏幕按下时，会直接执行touch事件，然后延迟300ms，在点击的这个坐标点查找元素，如果元素有鼠标事件就执行
		解决：
			e.preventDefault(); 	
*/
(function(){
	var box = document.querySelector('#box');
	box.addEventListener('touchend', function(e) {
		this.style.display = "none";
		e.preventDefault();
	});
})();	
</script>
</body>
</html>

如何在移动端兼容 requestAnimationFrame ？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;
window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.cancelRequestAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame;
/*
	requestAnimationFrame
	webkitRequestAnimationFrame
	mozRequestAnimationFrame

	cancelAnimationFrame
	webkitCancelAnimationFrame
	mozCancelAnimationFrame

	cancelRequestAnimationFrame
	webkitCancelRequestAnimationFrame
	mozCancelRequestAnimationFrame
*/	
if(!requestAnimationFrame){ //如果浏览器不支持咱们的动画帧 这回我们就需要用定时器来兼容动画帧
	var lastTime = 0;
	window.requestAnimationFrame = function(fn){
		var timer = 0;
		var nowTime = Date.now();//获取当前时间
		var time = Math.max(16.7 - (nowTime - lastTime),0);
		timer = setTimeout(fn,time);
		lastTime = nowTime;
		return timer;
	};
}
if(!cancelAnimationFrame){
	window.cancelAnimationFrame = function(index){
		clearTimeout(index);
	};
}
</script>
<style type="text/css">
#box {
	width: 100px;
	height: 100px;
	background: red;
}	
</style>
</head>
<body>
<input type="button" value="停止" id="stop">
<div id="box"></div>
<script type="text/javascript">
var box = document.getElementById('box');
var stop = document.getElementById('stop');
var width = 100;
var timer = 0;
// box.addEventListener('click', move);	
// stop.addEventListener('touchend', function(e) {
// 	cancelAnimationFrame(timer);
// });
box.onclick = move;
stop.onclick = function(){
	cancelAnimationFrame(timer);
};
function move(){
	timer = window.requestAnimationFrame(toMove);
}
function toMove(){
	width += 2;
	box.style.width = width + "px";
	if(width < 300){
		timer = window.requestAnimationFrame(toMove);
	}
}
</script>
</body>
</html>

在移动端如何优化图片的渲染？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img data-src="img/avatar2.jpg" />
<script type="text/javascript">
(function(){
	var imgs = document.querySelectorAll('img');
	for(var i = 0; i < imgs.length; i++){
		createImg(imgs[i])
	}
	function createImg(img){//生成图片
		var newImg = new Image();
		newImg.src = img.dataset.src;
		newImg.onload = function(){
			var c = document.createElement("canvas");
			var cxt = c.getContext("2d");
			c.width = newImg.width;
			c.height = newImg.height;
			cxt.drawImage(newImg,0,0,newImg.width,newImg.height);
			img.parentNode.replaceChild(c,img);
		};
	}
})();	
</script>
</body>
</html>

在移动端怎么禁止苹果手机自带的上滑下拉，且不能禁止浏览器事件？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
</head>
<body>
<ul class="list"></ul>
<script type="text/javascript">
/*
	判断什么时候才会触发到浏览器默认的下拉功能，
	然后在这个时候再阻止默认事件
		1. 滚动条的位置已经在0了
		2. 用户还在向下滑屏
*/
(function(){
	var lastPointY = 0;
	document.body.addEventListener('touchstart', function(e) {
		lastPointY = e.changedTouches[0].pageY;//按下时手指的坐标
	});
	document.body.addEventListener('touchmove', function(e) {
		var nowPointY = e.changedTouches[0].pageY;//手指移动时的坐标
		//e.preventDefault();
		if(nowPointY >= lastPointY && window.scrollY == 0){
			console.log("向下滑动");
			e.preventDefault();
		}
		lastPointY = nowPointY;
	});	
})();

(function(){
	var list = document.querySelector('.list');
	var inner = "";
	for(var i = 0; i < 50; i++){
		inner += '<li>这是第'+i+'个li</li>'
	}
	list.innerHTML = inner;
})();	
</script>
</body>
</html>

input type=”file ” multiple 调取移动端相机兼容效果好吗？加个multiple属性不是应该有多个选择吗如选择相机图片摄像头为啥有的在浏览器里面直接打开相机了怎么可以保持多种选择

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<style type="text/css">
label {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -21px 0 0 -101px;
	width: 200px;
	height: 40px;
	border: 1px solid #000;
	text-align: center;
	font: 16px/40px "宋体";
}	
input {
	display: none;
}
</style>
</head>
<body>
<!--
	在各个机型都可以点击 file 调用相册 和 摄像头拍照
		1. 在老版本的安卓中，必须加上capture，否则只能调用相册
		2. 在新版本的部分安卓中 以及IOS中 加了capture，就只能调用摄像头不能调用相册

		解决办法:
			判断ios，如果是ios就去掉capture属性
-->
<label>上传图片
	<input type="file" id="file" accept="image/*" capture>
</label>
<script type="text/javascript">
(function(){
	var file = document.querySelector('#file');
	if(getIos()){
		file.removeAttribute("capture");
	}
})();
function getIos() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/iPhone\sOS/i) == "iphone os") {
        return true;
    } else {
        return false;
    }
}	
</script>
</body>
</html>

移动端上传照片部分设备照片会旋转90度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,user-scalable=no" />
</head>
<body>
<img src="DSCN0614_small.jpg" />
<script type="text/javascript" src="js/exif.js"></script>
<script type="text/javascript">
var img = document.querySelector('img');
EXIF.getData(img, function(){
	//console.log(EXIF.getAllTags(img));
	console.log(EXIF.getTag(img,"Orientation"));
});
</script>
</body>
</html>

解决安卓下点击了软键盘缩放之后，触发不了input的blur的问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
	margin: 0;
}	
input {
	width: 100%;
	box-sizing: border-box;
	height: 50px;
	border: 2px solid #000;
}
input:focus {
	border-color: blue;
	box-shadow: 0 0 10px blue;
}
</style>
</head>
<body>
<input id="text" type="text" name="">
<div id="info"></div>
<script type="text/javascript">
(function(){
	var text = document.querySelector('#text');
	var info = document.querySelector('#info');
	text.onfocus = function(){
		// setInterval(function(){
		// 	// info.innerHTML += document.documentElement.clientHeight + "|<br/>";
		// },100);
		//软键盘的弹出 会影响窗口的大小发生改变
		// 展开是 改变一次，收缩起来又改变一次
		window.addEventListener('resize', toResize);
	};
	function toResize(){
		window.removeEventListener('resize', toResize);
		window.addEventListener('resize', toBlur);
	}
	function toBlur(){
		window.removeEventListener('resize', toBlur);
		text.blur();
	}
})();	
</script>
</body>
</html>

安卓下大面积触摸会触发touchmove的问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<!--
安卓下大面积触摸会触发touchmove的问题

滑屏误触，该怎么合理解决？

tap事件的封装
-->
<style type="text/css">
body {
	margin: 0;
}	
.box {
	margin: 50px 0;
	height: 100px;
	background: red;
}
</style>
</head>
<body>
<div class="page">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>	
<script type="text/javascript">
document.addEventListener('touchstart', function(e) {
	e.preventDefault();
});
(function(){
	var boxs = document.querySelectorAll('.box');
	/* 滑屏误触问题 */
	for(var i = 0; i < boxs.length; i++){
		// boxs[i].addEventListener('touchend', function(e){
			
		// });
		tap(boxs[i],function(){
			this.style.background = "blue";
		});
	}
	/* 解决方案：自己封装一个tap事件 */
})();
function tap(el,fn){
	/*
		点击事件的思路:
			当用户抬起手指时，判断用户有没有进行过滑动
			如果用户进行过滑动，就不算点击
			1) 声明变量记录用户是否进行滑动
			2）touchmove中记录用户进行了滑动
			3）touchend 对该变量进行判断

	*/
	var isMove = false;
	el.addEventListener('touchmove', function(e) {
		isMove = true;
	});
	el.addEventListener('touchend', function(e) {
		if(!isMove){
			fn&&fn.call(el,e);
		}
		isMove = false;
	});
}	
</script>
</body>
</html>

滑屏误触，该怎么合理解决？tap事件的封装

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<!--
安卓下大面积触摸会触发touchmove的问题

滑屏误触，该怎么合理解决？

tap事件的封装
-->
<style type="text/css">
body {
	margin: 0;
}	
.box {
	margin: 50px 0;
	height: 100px;
	background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script type="text/javascript">
(function(){
	var boxs = document.querySelectorAll('.box');
	for(var i = 0; i < boxs.length; i++){
		tap(boxs[i],function(){
			this.style.background = "blue";
		});
	}
})();
function tap(el,fn){
	var startPoint = {};
	el.addEventListener('touchstart', function(e) {
		startPoint = {
			x: e.changedTouches[0].pageX,
			y: e.changedTouches[0].pageY
		};
	});
	el.addEventListener('touchend', function(e) {
		var nowPoint = {
			x: e.changedTouches[0].pageX,
			y: e.changedTouches[0].pageY
		};
		if(Math.abs(nowPoint.x - startPoint.x) < 5
		&&Math.abs(nowPoint.y - startPoint.y) < 5) {
			fn&&fn.call(el,e)
		}
	});
}
</script>

</body>

移动端输入框被遮挡了怎么办呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
	margin: 0;
}	
body,
html {
	height: 100%;
}
.page {
	position: relative;
	height: 100%;
	background: #f1f1f1;
}
.text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40px;
	box-sizing: border-box;
}
.info {
	position: absolute;
	left: 0;
	bottom: 50px;
	width: 100%;
	height: 40px;
	background: #333;
	color: #fff;
}
</style>
</head>
<body>
<div class="page">
	<div class="info"></div>
	<input type="text" class="text" name="">
</div>
<script type="text/javascript" src="js/mTween.js"></script>
<script type="text/javascript">
(function(){
	var page = document.querySelector('.page');
	var text = document.querySelector('.text');
	var info = document.querySelector('.info');
	var old = 0;
	css(page,"translateY",0);
	/*
		移动端输入框被遮挡的问题
			1) 在软件盘弹出之后（在focus中加个延迟时间），获取input的坐标
			2) 判断input是否遮挡
				1. 判断 input 是否在 可视区的高度以下
			3) 如果被遮挡了 就向上移动整个页面
				1. 用被软件盘遮挡的距离 	

	*/
	text.addEventListener('focus', function(e) {
		setTimeout(function(){
			//延迟一段时间之后，才可以获取到软键盘弹出之后的坐标
			var rect = text.getBoundingClientRect();
			var h = document.documentElement.clientHeight; 
			old = css(page,"translateY");
			if(rect.bottom > h){
				//info.innerHTML = "被遮挡了";
				var dis = rect.bottom - h;
				css(page,"translateY", old - dis);
			}
		},1000);
	});
	text.addEventListener('blur', function(e) {
		old = css(page,"translateY",old);
	});
})();
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,
html {
	margin: 0;
	height: 100%;
}
.page {
	position: relative;
	height: 100%;
}
.div {
	position: absolute;
	background: #000;
	text-align: center;
	font-size: 50px;
	color: #fff;
}
</style>
</head>
<body>
<div class="page">
	<div class="div">我要横屏显示</div>
</div>
<script type="text/javascript" src="js/mTween.js"></script>
<script type="text/javascript">
(function(){
	toChange();
	window.addEventListener('orientationchange',toChange);
	function toChange(){
		var page = document.querySelector('.page');
		var div = document.querySelector('.div');
		console.log(page.clientWidth,page.clientHeight);
		var w = Math.max(page.clientWidth,page.clientHeight);
		var h = Math.min(page.clientWidth,page.clientHeight);
		/* 让div和page的大小一样 并且 中心点对齐*/
		div.style.width = w + "px";
		div.style.height = h + "px";
		div.style.left = (page.clientWidth - w)/2 + "px";
		div.style.top = (page.clientHeight - h)/2 + "px";
		/* 判断 当前是竖屏还是 竖屏 然后给内容一个旋转值 */
		//alert(window.orientation); 横屏 90 -90  竖屏 0 180
		if(window.orientation == 90 || window.orientation == -90){
			css(div,"rotate",0);
		} else if(window.orientation == 0 || window.orientation == 180){
			css(div,"rotate",90);
		}

	}
})();	
</script>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。