移动端固定微信浏览器

最新推荐文章于 2019-04-03 09:13:17 发布

心郎

最新推荐文章于 2019-04-03 09:13:17 发布

阅读量359

点赞数

分类专栏：前端_js

本文链接：https://blog.csdn.net/u011301203/article/details/78352241

版权

前端_js 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="x5-fullscreen" content="true">

		<style>
			.one{
				
			}
			.one li{
				height: 30px;
				width: 100%;
				border: 1px solid red;
			}
			.div1{
				height: 30px;
				width: 100px;
				background-color: black;
				position: fixed;
				bottom: 10px;
			}
			.div2{
				height: 30px;
				width: 100px;
				background-color: black;
				position: fixed;
				bottom: 10px;
				left: 150px;
			}
		</style>
	</head>
	<body>
		
		
		
		<ul class="one scroll">
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
			<li>第三个</li>
		</ul>
		
		<div class="div1">按钮1</div>
		<div class="div2">按钮2</div>
		<script>
			
			var div1 = document.getElementsByClassName('div1')[0];
			var div2 = document.getElementsByClassName('div2')[0];
			
			
			//jq处理方式
			$(".div1").on(' touchstart',function(){   
				$("body").on('touchmove',function(event) {     
					event.preventDefault();     
				}, false);}
			)
			$(".div2").on(' touchend',function(){    
				$("body").unbind('touchmove');
			})
			
			//原声js处理方式 （ 一：相同事件绑定和解除，需要使用共用函数；二：共用函数不能带参数；）
			div1.onclick = function(){
				document.body.addEventListener('touchmove',bodyScroll,false);
			}
			div2.onclick = function(){
				document.body.removeEventListener('touchmove',bodyScroll,false);
			}
			function bodyScroll(event){
			    event.preventDefault();
			}
			
			
			//三者区别
			function event(event){
	 			event.preventDefault();  -- //阻止元素的默认事件。
				
				event.stopPropagation();  -- //阻止元素冒泡事件
				
				return false; 　-- //做三件事 1 event.preventDefault(); 2 event.stopPropagation(); 3 停止回调函数执行并立即返回。
			}
			
		</script>
		
	</body>
</html>
`