移动端页面手势滑动触发touch事件时，在页面的左右上下部分出现空白部分的问题

最新推荐文章于 2024-08-17 15:12:25 发布
最新推荐文章于 2024-08-17 15:12:25 发布
阅读量356 收藏
点赞数
文章标签： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ScriptWELL/article/details/133174020
版权
在移动端前端开发中，手势滑动触发touch事件时页面边缘可能出现空白。通过设置CSS属性`overscroll-behavior`为`contain`或`none`，可以阻止默认滚动，消除空白。此方法需考虑浏览器兼容性，确保在目标浏览器中正常工作，以提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在移动端的前端开发中，经常会遇到手势滑动触发touch事件的需求。然而，有时候在实现这个功能时，会出现一个问题：当我们在页面上进行左右或上下滑动时，页面的左右上下部分会出现一些空白的区域。这种情况通常是由于移动设备的默认滚动行为导致的。

要解决这个问题，我们可以使用CSS属性overscroll-behavior来控制滚动行为。通过设置overscroll-behavior属性为contain，可以阻止页面的默认滚动行为，从而避免出现空白部分。

下面是一个示例代码，演示如何使用overscroll-behavior属性解决移动端页面手势滑动触发touch事件时出现空白部分的问题：

<!DOCTYPE html>
<html
了解本专栏 订阅专栏 解锁全文
移动端触发touch事件同时触发click事件的相关解决方法
feniuben的专栏
03-20 1万+
上周做了一个项目，发现一个DOM元素触发touch事件，竟然还会触发别的元素的click事件。 我先描述一下，当时遇到的问题。项目初始状态是下面这张图： 我给右上方的的搜索按钮，绑定了一个touchstart事件，点击以后出现一个搜索框。至于为什么不直接绑定click事件，是因为touch事件响应更快，交互上更加流畅。 这个搜索框右边的搜索按钮，绑定了一个click事件，点击
移动端拖动时触发点击事件问题处理
Jack_error的博客
08-27 1652
移动端拖动触发点击事件问题处理项目场景：问题描述：原因分析：知识点准备：产生问题的额原因：解决方案： 项目场景： 移动端的tab栏或者下拉选择栏，或者滚动时页面有点击事件的元素 问题描述： 移动端的tabs滑动时会选中拖动时的选项，实际需要往后滑动选择后面内容，但是停止滑动后tabs已经切换 原因分析： 知识点准备： 一般移动端的点击事件有click、touch系列、tap系列；一般会使用touchend代替cilck，至于为什么感兴趣的可以去了解一下，我后续的文章会讲解； 产生问题的额原因：
移动端页面滑动会触发点击事件问题
zgwnDong的博客
11-20 2796
在移动端时用了点击事件，但是在滑动页面时，总是会被触发。 解决方案是： 把click事件换成touchend事件 $("body").on("touchend",".todetail",function(){ }); 然后引入并调用以下函数 function stopTouchendPropagationAfterScroll(){ var locked = false; window.addEventListener('touchmove', function(ev){
移动端适配苹果向上滑动时，页面出现空白
2301_77940797的博客
03-22 588
body样式中有overflow样式导致出现这种情况，这是我们可以设置body样式（也可能是html，最好都看一下）如下。近期使用uni-app开发移动端网站时，在适配苹果手机的时候发现当上滑动页面时，底部会有空白显示，最终发现问题所在。此时再真机测试就没问题了。
解决touchStart滑动时触发点击事件
zhiyikeji的博客
02-15 8354
由于我们在将点击事件委托到div,span,font,p等元素标签上时会导致移动端的ios设备无法识别这个点击事件（一般指click事件）， 此时我们一般会使用touchstart来替换click事件，但是使用touchstart来代替click事件的弊端就立刻显示出来，每当我们滑动屏幕时就会立刻出发点击事件 此时加入我这个封装的方法，这个弊端就会迎刃而解 function tap(el,fn...
移动端开发必会出现的问题和解决方案
qq_43623970的博客
04-30 1843
对于一个开发了多个H5的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。 问题 下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上...
12个前端必会 H5 问题及解决方法
qianduan666a的博客
08-14 1055
前言 作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。 问题 下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟
【移动端pdf.js优化指南】：触摸优化与性能提升技巧
![【移动端pdf.js优化指南】：触摸优化与性能提升技巧]...本文探讨了移动端PDF.js的优化策略，包括触摸事件处理、交互性能和手势识别的改进，以及渲染性能优化、内存资源管理、异步加载与分页预取技巧的实
iPlatUI响应式设计指南：移动端界面友好度提升技巧
响应式设计是网页和应用开发中用于提高用户体验的一种方法，它能够确保内容在不同设备和屏幕尺寸上保持一致性和可用性。本文首先介绍了响应式设计的基础概念和理论基础，详细探讨了其关键原则、组件理论以及兼容性...
解决移动端HTML页面右侧空白问题
热门推荐
qq_41853417的博客
11-19 2万+
问题描述 响应式网页缩放时出现右侧空白 原因：子元素宽度撑开页面 通常纯pc端页面各元素固定宽度不会出现问题，但响应式页面部分元素定宽容易出现问题 测试后发现可能出现以下布局： 内部元素定宽，外部自适应，当缩放到小于内部宽度时出现空白 此时.blank定宽700px，撑开body使整体观感右侧有空白 不换行元素宽度过长 虽然给ul元素定宽300px，但有不换行white-space:nowrap;属性，内部li超过页面宽度后也会产生缩放空白，如果 <h1~6>等标签元素溢出 也会产生空白
web移动端解决右滑出现空白
xiaogezl的博客
04-11 8529
最近在写移动端项目，应用在微信上面的一个webapp（vue单页面开发），遇到了一个很尴尬的问题，就是有些页面之间的跳转是通过储存在sessionStorage中的某些数据，然后进行判断再渲染不同的组件，通过页面中左上角返回按钮进行修改sessionStorage中的值。但是由于Ios自带的左滑返回上一页，导致了不触发左上角的按钮直接返回，从而渲染了错误的页面，所以我通过以下代码阻止了默认返回上一
页面左右滑时，如何防止页面上下滑动
u011461327的博客
11-22 8634
最近，做了一个项目，需要在手机端用H5写一个程序模仿苹果手机原生的左右菜单，如下图： 简单实现了功能后，发现手机端运行时会遇到一个问题，当我手指进行左右滑动菜单时，除非手指水平滑动，否则会造成屏幕上下滑动。仔细研究后，发现是由于手指不能保证水平滑动，因此在滑动时，会有一定的误差，导致屏幕认为手指进行了上下滑动的操作。因此解决办法如下： 1）在touchstart处，记录targetTouc...
移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住
weixin_30245867的博客
12-19 1129
起因 起因 -webkit-overflow-scrolling 问题 解决方案： 方案一 方案二 思考为什么会出现这个问题 总结 故事的起因是，在一个多列表的页面上，页面在iOS11，跟iOS10中会发生页面卡住，不能进行滚动。 然后就怀疑是自己的样式写的出了问题，就一直排查定位元素的样式，怎么都找不到问题所在。 ...
移动端页面移动问题
Vernal_F的专栏
09-25 272
移动端页面向左滑动会出现空白 解决方法： 在body上添加样式：overflow-x:hidden
【移动端H5】click事件和touch事件的区分
最新发布
weixin_57208584的博客
08-17 916
touch事件是移动端区别于pc端触控的独有事件，也是实现很多手势的基础事件。它具体包含了：touchstart（触摸开始时触发）、touchmove（触摸并产生移动时触发）、touchend（触摸结束时触发）等一系列事件。
Demo记录|移动端H5页面如何实现上下滑动触发事件的小功能
qq_44886882的博客
09-06 1256
简单记录一个小demo，如果写h5页面比较实用，可以实现一些有趣的功能。
H5--IOS——解决滑动回弹效果导致的bug
m0_37616866的博客
05-10 3069
现象描述：当我显示弹窗时，手指放入弹框的区域 移动时， 会出现滑动模块与阴影背景色错位，从而产生bug。 使用 inobounce插件 解决，下载插件 npm install inobounce -s 实际代码 <template> <div class="approval-process" v-if="visible"> ... </div> </template> <script lang="ts"> import i.
android 图片轮播 图片切换向右滑动出现白色页面
zhuanzhu6813的博客
12-31 1091
? public class MyViewPagerScroll extends ViewPager {     Activity mActivity; // 上下文     List mListViews; // 图片组     int mScrollTime = 0;     Timer timer;     int oldIndex = 0;     int curIndex 
Android 下拉刷新上拉加载（解决item未满一页时的显示问题、添加网络错误等提示）
ifadai的博客
05-22 2282
Android 下拉刷新和上拉加载，解决item未满一页时的显示问题、添加网络错误提示、数据全部加载提示。
移动端web实现手势滑动轮播图切换教程
在Web应用中，实现触摸滑动的手势操作需要使用到JavaScript，特别是`touch`事件。 【描述】所涉及的知识点包括： 1.轮播图切换效果：轮播图是一种常见的Web内容展示形式，用于展示一系列的图片或内容，用户可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值