移动端滚动条穿透(失去焦点)解决---用touch事件写滑动

最新推荐文章于 2023-10-07 10:19:50 发布
最新推荐文章于 2023-10-07 10:19:50 发布
阅读量385 收藏
点赞数
分类专栏： h5 文章标签： scrollbar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/judykang123/article/details/109995509
版权

效果

可以看到滑动下面的图层后，再滑动（红色边框内的）可滑动部分，不会有卡顿、失去焦点的情况，里面的元素也可以点击。
在这里插入图片描述

问题点

经测试，是因为现在用的移动端的适配（下面的代码）的问题，但是目前没找到更好的，所以先用touch事件写一套

//这段就是有问题的那段适配,目前的项目都是用的这个，有好的再换
(function() {
	var _width = 750;
	var ua = navigator.userAgent;
	if (/Android (\d+\.\d+)/.test(ua)) {
		var version = parseFloat(RegExp.$1);
		if (version > 2.3) {
			document.write('<meta name="viewport" content="width=' + _width +
				',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
		} else {
			document.write('<meta name="viewport" content="width=' + _width +
				',target-densitydpi=device-dpi">')
		}
	} else if (/QQAC_Client_iOS/.test(ua)) {
		document.write('<meta name="viewport" content="width=' + _width +
			',maximum-scale=0.5,minimum-scale=0.5">');
	} else {
		document.write('<meta name="viewport" content="width=' + _width +
			',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
	}
})();

touch事件滑动的逻辑

  • 先获取要滚动的部分（里面的盒子，如下图的蓝色背景颜色的部分，暂且称它为insideBox）和滚动外面的盒子（如下图红色边框部分，暂且称它为outsideBox）的高度，得出差值
  • 再获取insideBox当前的top值，滑动时进行更改
  • 如果差值是负数，滑动无反应
  • 如果差值是正数，可以滑动
    • 从上往下滑时
      • 如果top <= 0，正常滑动
      • 否则top = 0
    • 从下往上滑动时
      • 如果top <= 0，可以滑动
        • 如果top <= -差值，再滑向上动时top = 差值
        • 否则正常滑动
  • 因为使用了touch事件，在点击里面的选项时也需要用touch事件判断一下
    在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
		<title>touch事件滑动</title>
		<script>
			(function() {
				var _width = 750;
				var ua = navigator.userAgent;
				if (/Android (\d+\.\d+)/.test(ua)) {
					var version = parseFloat(RegExp.$1);
					if (version > 2.3) {
						document.write('<meta name="viewport" content="width=' + _width +
							',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
					} else {
						document.write('<meta name="viewport" content="width=' + _width +
							',target-densitydpi=device-dpi">')
					}
				} else if (/QQAC_Client_iOS/.test(ua)) {
					document.write('<meta name="viewport" content="width=' + _width +
						',maximum-scale=0.5,minimum-scale=0.5">');
				} else {
					document.write('<meta name="viewport" content="width=' + _width +
						',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
				}
			})();
		</script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: #fff;
			}

			.page {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.scroll1 {
				position: absolute;
				left: 0;
				top: 0;
				width: 400px;
				height: 600px;
				overflow-x: hidden;
				overflow-y: scroll;
				border: 2px solid salmon;
			}

			.scroll1_long {
				position: absolute;
				left: 0;
				/* top: 0; */
				width: 100%;
				height: auto;

			}

			.scroll1_long_item {
				width: 100%;
				height: 60px;
				text-align: center;
				line-height: 60px;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<div class="scroll1">
				<div class="scroll1_long" style="top: 0;">
					<div class="scroll1_long_item">啧啧啧1</div>
					<div class="scroll1_long_item">啧啧啧2</div>
					<div class="scroll1_long_item">啧啧啧3</div>
					<div class="scroll1_long_item">啧啧啧4</div>
					<div class="scroll1_long_item">啧啧啧5</div>
					<div class="scroll1_long_item">啧啧啧6</div>
					<div class="scroll1_long_item">啧啧啧7</div>
					<div class="scroll1_long_item">啧啧啧8</div>
					<div class="scroll1_long_item">啧啧啧9</div>
					<div class="scroll1_long_item">啧啧啧10</div>
					<div class="scroll1_long_item">啧啧啧11</div>
					<div class="scroll1_long_item">啧啧啧12</div>
					<div class="scroll1_long_item">啧啧啧13</div>
					<div class="scroll1_long_item">啧啧啧14</div>
				</div>
			</div>
		</div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script>
		touchScroll('scroll1', 'scroll1_long');//调用
		let startX,
			startY,
			moveEndX,
			moveEndY,
			X,
			Y,
			startXItem,
			startYItem,
			moveEndXItem,
			moveEndYItem,
			XItem,
			YItem;
		//传入两个值,
		//outsideBox是外面固定高度,y轴超出可滚动的盒子
		//insideBox是里面被元素撑起高度的长的盒子
		function touchScroll(outsideBox, insideBox) {
			let outsideBoxHeight = $('.' + outsideBox).height();
			insideBoxHeight = $('.' + insideBox).height();
			//里面的比外面的多多少,如果是负数,滑动无反应;如果是正数,向上划到top为差值时,再向上划无反应,向下划到top为0时再向下划无反应
			maxScrollLength = insideBoxHeight - outsideBoxHeight,
				//里面长图现在的top值,根据滑动变化top值
				nowTop = parseInt($('.' + insideBox)[0].style.top.split('px')[0]),
				//滑动系数,控制滑动速度,数值越小,滑动速度越慢
				scrollNum = 0.06;

			console.log('nowTop : ' + nowTop);
			console.log('outsideBoxHeight : ' + outsideBoxHeight + ' , insideBoxHeight : ' + insideBoxHeight +
				' maxScrollLength : ' + maxScrollLength);


			//监听滑动方向
			$('.' + insideBox).on('touchstart', function(e) {
				e.preventDefault();
				startX = e.originalEvent.changedTouches[0].pageX,
				startY = e.originalEvent.changedTouches[0].pageY;
			});

			$('.' + insideBox).on('touchmove', function(e) {
				e.preventDefault();
				moveEndX = e.originalEvent.changedTouches[0].pageX,
				moveEndY = e.originalEvent.changedTouches[0].pageY,
				X = moveEndX - startX,
				Y = moveEndY - startY;

				if (maxScrollLength > 0) {
					if (Math.abs(X) > Math.abs(Y) && X > 0) {
						console.log('left to right');
					} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
						console.log('right to left');
					} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
						console.log('top to bottom');

						if (nowTop <= 0) {
							nowTop = nowTop + Y * scrollNum;
						} else {
							nowTop = 0;
						}
						$('.' + insideBox).css('top', nowTop + 'px');

					} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
						console.log('bottom to top');

						if (nowTop <= 0) {
							if (nowTop <= -maxScrollLength) {
								nowTop = -maxScrollLength;
							} else {
								nowTop = nowTop + Y * scrollNum;
							}

							$('.' + insideBox).css('top', nowTop + 'px');
						}
					} else {
						console.log('just touch');
					}

				}
			});

			$('.' + insideBox).on('touchend', function(e) {
				e.preventDefault();
				if (maxScrollLength > 0) {
					if (nowTop <= -maxScrollLength) {
						nowTop = -maxScrollLength;
					} else if (nowTop > 0) {
						nowTop = 0;
					}
					$('.' + insideBox).css('top', nowTop + 'px');
				}

			});
		}


		//点击里面每个选项
		$('.scroll1_long_item').on('touchstart', function(e) {
			startXItem = e.originalEvent.changedTouches[0].pageX,
			startYItem = e.originalEvent.changedTouches[0].pageY;
		})
		$('.scroll1_long_item').on('touchend', function(e) {
			moveEndXItem = e.originalEvent.changedTouches[0].pageX,
			moveEndYItem = e.originalEvent.changedTouches[0].pageY,
			XItem = moveEndXItem - startXItem,
			YItem = moveEndYItem - startYItem;
			if (Math.abs(XItem) == 0 && Math.abs(YItem) == 0) {
				alert($(this).text());
			}
		})
	</script>
</html>

注意

  • insideBox对应的元素（这里是scroll1_long）应该有定位的元素
  • insideBox对应的元素在行内写top属性
  • 调用 ： touchScroll(outsideBox, insideBox);
  • 里面的元素点击需要确认点击时手指头没有滑动，要是只写touchstart或者touchend，滑动时也算。
  • 这里只是上下滑动的，左右滑动请在打印出right to left 和 left to right的块里面写
judy_1118
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决移动端input点击与失焦事件冲突
yujin0213的博客
12-29 3005
问题描述 如下图所示，移动端的输入框，后面是一个清除按钮。业务场景是收起键盘的时候触发校验逻辑，但是实现的时候，点击清除按钮，键盘就自动收起了，而且也触发了校验逻辑。交互要求：输入文本的时候键盘是弹起来的，此时点击清除按钮，不让键盘收起；输入完成后，收起键盘，此时点击清除按钮，需要聚焦到input里，且弹起键盘 原因 input点击事件与失焦事件冲突了，在click的时候会先触发blur事件，再触发click事件 解决方案 1、思路 监听清除按钮的mousedown事件，阻止默认事件，即阻止点击后默认失
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
12-12
1、在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部，解决滚动条位置自动记录问题； 2、在每个组件内定义一条变量scrollWatch默认为true，在绑定滚动监听事件时加个if判断，只有在...
移动端输入框的失焦事件和按钮事件冲突
叮当的猫猫的博客
09-07 995
2.使用@click 指令替代v-on:click，在按钮上使用@click，并在点击事件处理函数中使用setTimeout延迟执行失焦操作，这样可以确保按钮点击事件能够先执行，再执行失焦操作。原因出在，在移动端，当输入框获取焦点后，点击按钮不会触发输入框的失焦事件，这是因为移动设备上的软键盘和按钮点击事件会有冲突，为了解决这个问题，可以尝试以下几种做法。3.移动设备上的按钮点击使用v-on:rouchend事件代替v-on:click,因为touched事件在移动设备上触发时，输入框已经失去了焦点。
移动端的获取焦点和失去焦点事件
qq_29715077的博客
07-25 6024
var body = document.getElementById("swiper-container"); body.addEventListener('touchmove',function(event){ setTimeout(function(){ $("#bg_footer").show(); },100) },false); body.addEventListe...
scroll html5无效,移动端滚动类框架 iScroll5 表单元素无法失焦 解决方法
weixin_42514433的博客
06-08 199
iScroll5 表单元素无法失焦 解决方法HTML5学堂：iScroll框架从4版本升级到5版本之后，很好的解决了滚动区域中表单元素不能聚焦的问题，但是，2014年年底测试的时候发现了5版本的一个问题，如果在滚动区域当中增加了表单元素，在点击表单元素之后可以正常输入，却无法让表单元素失焦。效果图：代码解释：在文本框当中输入了HTML5学堂之后，再点击其他位置，当前文本框并不能失焦。这个问题当时让...
touchend与滚动事件冲突的问题
开心就好的专栏
04-27 3260
问题描述: content高度固定, 期中有多个p标签, 致使出现滚动. 需求是点(touchend)p标签的时候,做业务处理. 然后问题就出现了: 滚动的时候也会触发touchend. 代码示意如下: &lt;div id="content"&gt; &lt;p&gt;内容&lt;/p&gt; &lt;p&gt;内容&lt;/p&gt; &lt;p&gt;内容&amp
vue使用keep-alive保持滚动条位置的实现方法
10-17
主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
滚动穿透通常发生在弹窗或半透明遮罩层出现时，用户在这些层上滑动，但希望底层页面的内容能够继续滚动。为了解决这个问题，我们可以利用`catchtouchmove`属性。当一个元素具有`catchtouchmove`属性时，它会捕获触摸...
Vue项目移动端滚动穿透问题的实现
10-15
总结来说，解决Vue项目移动端滚动穿透问题的关键在于正确地处理触摸事件和模拟滚动位置。通过阻止不需要滚动的元素上的`touchmove`事件，以及在需要滚动的元素上使用`position: fixed`和`top`属性，我们可以有效地...
微信小程序scroll-view仿拼多多横向滑动滚动条
10-18
主要为大家详细介绍了微信小程序scroll-view仿拼多多横向滑动滚动条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
手机滑动焦点图,滑屏
ffshenghui的专栏
03-22 1779
焦点图轮播 主要是为了在手机上面可以手指滑动的效果 @charset "utf-8"; /*-------------- lastTime : 2012.09.28 tags : img_ad | reset ----------------*/ /*------reset-------*/ body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, u
移动端滚动穿透与滚动溢出解决方案
最新发布
LuckyWinty的博客
10-07 233
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群滚动穿透问题描述在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的DOM元素上一样，我们姑且称之为滚动穿透。问题原因能够猜想是文档（document）的滚动事件被触发了，如果能禁用滚动事件就好办了。...
移动端focus事件失效问题
ztg_superman的博客
09-22 1万+
移动端的focus会失效，比如调用键盘输入框，我们通常需要在点击输入框的时候弹出键盘，通常要移动设备弹出键盘，就是输入框获得focus 通常我们的写法是：    var input=document.getElementByTagName('input');      input..addEventListener('focus',function(){       //执行
当滚动列表的时候，让input框失去焦点（移动端会收起键盘）
weixin_33834910的博客
08-14 2603
1.拓展scroll.vue事件 1 beforeScroll:{ 2 type:Boolean, 3 default:false 4 } 5 6 7 if(this.beforeScroll){//滚动列表的时候收起键盘（移动端） 8 this.scroll.on('beforeScrol...
关于移动端h5页面不能滑动问题的解决办法
热门推荐
qq_36167454的博客
12-02 5万+
页面不能滑动无非就是css和js两个方面的问题 有的人说如果我写很多个p标签不写任何样式看能不能滑动，如果能滑动说明是样式的原因，要是也不能滑动那就应该是js的原因，是有一定的道理的，但是先别忘了看一下你的html或body是不是加了height：100%；overflow：hidden； 1.下面分先说css的问题，主要排查overflow：hidden； 检查也有一定
vue 手机端输入框在页面滚动时，失去焦点
qq_34724739的博客
04-27 876
vue 手机端输入框在页面滚动时，失去焦点 监听页面滚动触发方法 myTouchMove mounted() { window.addEventListener('touchmove', this.myTouchMove, true); }, 在methods 加上，blur() 取消焦点，用 ref 属性绑定input，$refs 获取到对应的input methods: { myTouchMove() { this.$refs.commentInput.blur()
Vue + ElementUI 开发项目，遇到下拉框option 失去焦点时 不关闭的问题
weixin_43968963的博客
04-27 3789
问题描述： 使用Vue + ElementUI 框架开发项目且用了下拉加载更多，遇到了下拉框（el-select）中的option（el-option）失去焦点后，下拉框不隐藏，并在控制台报错**Uncaught TypeError: Cannot read properties of null (reading ‘disabled’) **，截图如下： 控制台报错： 不关闭的下拉选择框： 百度参考了其他文章之后得到的结果是使用了 el-dropdown 下缺少 el-dropdown-menu 元素
滚动条样式属性，以及去掉移动端滚动条解决方案
05-30
至于去掉移动端滚动条，可以使用以下 CSS 代码： ```css /* Webkit 浏览器 */ body { overflow: auto; -webkit-overflow-scrolling: touch; } /* Firefox 浏览器 */ body { overflow: scroll; } ``` 其中，`-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值