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

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

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

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

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

<!DOCTYPE html>
<html>
了解本专栏 订阅专栏 解锁全文
微信小程序-解决iOS系统下拉或者拖动整个页面出现白底问题【亲测有效】
**My Coding Family**
03-17 1万+
微信小程序-解决iOS系统下拉或者拖动整个页面出现白底问题【亲测有效】
H5--IOS——解决滑动回弹效果导致的bug
m0_37616866的博客
05-10 3159
现象描述：当我显示弹窗时，手指放入弹框的区域 移动时， 会出现滑动模块与阴影背景色错位，从而产生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 1107
? public class MyViewPagerScroll extends ViewPager {     Activity mActivity; // 上下文     List mListViews; // 图片组     int mScrollTime = 0;     Timer timer;     int oldIndex = 0;     int curIndex 
移动端页面滑动会触发点击事件问题
zgwnDong的博客
11-20 2912
在移动端时用了点击事件，但是在滑动页面时，总是会被触发。 解决方案是： 把click事件换成touchend事件 $("body").on("touchend",".todetail",function(){ }); 然后引入并调用以下函数 function stopTouchendPropagationAfterScroll(){ var locked = false; window.addEventListener('touchmove', function(ev){
移动端适配苹果向上滑动时，页面出现空白
2301_77940797的博客
03-22 709
body样式中有overflow样式导致出现这种情况，这是我们可以设置body样式（也可能是html，最好都看一下）如下。近期使用uni-app开发移动端网站时，在适配苹果手机的时候发现当上滑动页面时，底部会有空白显示，最终发现问题所在。此时再真机测试就没问题了。
解决touchStart滑动时触发点击事件
zhiyikeji的博客
02-15 8462
由于我们在将点击事件委托到div,span,font,p等元素标签上时会导致移动端的ios设备无法识别这个点击事件（一般指click事件）， 此时我们一般会使用touchstart来替换click事件，但是使用touchstart来代替click事件的弊端就立刻显示出来，每当我们滑动屏幕时就会立刻出发点击事件 此时加入我这个封装的方法，这个弊端就会迎刃而解 function tap(el,fn...
移动端左右滑动切换页面实现方案与源码解析
该效果通过用户手指在屏幕上的左右滑动操作，实现不同页面或内容模块之间的平滑切换，极大提升了用户体验的流畅性与直观性。本文围绕“移动端滑动切换效果”的实现原理、技术细节、事件机制、逻辑控制及扩展应用进行...
js移动端手势事件处理插件jgestures.min.js
当用户在触摸屏上进行操作时，浏览器会触发一系列 touch 相关事件，jGestures 通过监听这些事件并收集触摸点的位置、时间戳、移动轨迹等信息，结合预设的算法模型判断当前正在进行的手势类型。例如，在检测滑动手势...
React-flexlist：移动端上下滑动刷新组件
在移动端开发中，由于不同设备视口高度各异，开发者通常需要动态计算此值，例如通过 `window.innerHeight - headerHeight - footerHeight` 的方式传入，以保证列表区域正确填充可用空间，避免出现空白或溢出问题。...
swipeable-react：用于移动浏览器的轻量级滑动手势组件
该组件通过封装底层的触摸事件逻辑，使开发者能够以声明式的方式轻松监听用户在触屏设备上的上下左右滑动行为，从而实现诸如轮播图切换、页面导航、菜单展开/收起等常见移动端交互功能。其核心设计理念是“简单易用...
移动端touch事件
weixin_44740410的博客
05-15 436
1)touch事件:touch,触摸,是移动端的触摸事件,是一组事件 1.touchstart:当手指触摸到屏幕的时候触发--只会触发一次 2.touchmove:当手指在屏幕中滑动时触发---一直触发 3.touchend:当手指离开屏幕时触发---只会触发一次 4.touchcancel:被迫中止滑动时触发---当来电 弹出消息 2)移动端添加事件的方式:addEventListener(事...
移动端触发touch事件同时触发click事件的相关解决方法
feniuben的专栏
03-20 1万+
上周做了一个项目，发现一个DOM元素触发touch事件，竟然还会触发别的元素的click事件。 我先描述一下，当时遇到的问题。项目初始状态是下面这张图： 我给右上方的的搜索按钮，绑定了一个touchstart事件，点击以后出现一个搜索框。至于为什么不直接绑定click事件，是因为touch事件响应更快，交互上更加流畅。 这个搜索框右边的搜索按钮，绑定了一个click事件，点击
移动端拖动时触发点击事件问题处理
Jack_error的博客
08-27 1715
移动端拖动触发点击事件问题处理项目场景：问题描述：原因分析：知识点准备：产生问题的额原因：解决方案： 项目场景： 移动端的tab栏或者下拉选择栏，或者滚动时页面有点击事件的元素 问题描述： 移动端的tabs滑动时会选中拖动时的选项，实际需要往后滑动选择后面内容，但是停止滑动后tabs已经切换 原因分析： 知识点准备： 一般移动端的点击事件有click、touch系列、tap系列；一般会使用touchend代替cilck，至于为什么感兴趣的可以去了解一下，我后续的文章会讲解； 产生问题的额原因：
解决移动端HTML页面右侧空白问题
热门推荐
qq_41853417的博客
11-19 2万+
问题描述 响应式网页缩放时出现右侧空白 原因：子元素宽度撑开页面 通常纯pc端页面各元素固定宽度不会出现问题，但响应式页面部分元素定宽容易出现问题 测试后发现可能出现以下布局： 内部元素定宽，外部自适应，当缩放到小于内部宽度时出现空白 此时.blank定宽700px，撑开body使整体观感右侧有空白 不换行元素宽度过长 虽然给ul元素定宽300px，但有不换行white-space:nowrap;属性，内部li超过页面宽度后也会产生缩放空白，如果 <h1~6>等标签元素溢出 也会产生空白
web移动端解决右滑出现空白
xiaogezl的博客
04-11 8567
最近在写移动端项目，应用在微信上面的一个webapp（vue单页面开发），遇到了一个很尴尬的问题，就是有些页面之间的跳转是通过储存在sessionStorage中的某些数据，然后进行判断再渲染不同的组件，通过页面中左上角返回按钮进行修改sessionStorage中的值。但是由于Ios自带的左滑返回上一页，导致了不触发左上角的按钮直接返回，从而渲染了错误的页面，所以我通过以下代码阻止了默认返回上一
页面左右滑时，如何防止页面上下滑动
u011461327的博客
11-22 8702
最近，做了一个项目，需要在手机端用H5写一个程序模仿苹果手机原生的左右菜单，如下图： 简单实现了功能后，发现手机端运行时会遇到一个问题，当我手指进行左右滑动菜单时，除非手指水平滑动，否则会造成屏幕上下滑动。仔细研究后，发现是由于手指不能保证水平滑动，因此在滑动时，会有一定的误差，导致屏幕认为手指进行了上下滑动的操作。因此解决办法如下： 1）在touchstart处，记录targetTouc...
移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住
weixin_30245867的博客
12-19 1152
起因 起因 -webkit-overflow-scrolling 问题 解决方案： 方案一 方案二 思考为什么会出现这个问题 总结 故事的起因是，在一个多列表的页面上，页面在iOS11，跟iOS10中会发生页面卡住，不能进行滚动。 然后就怀疑是自己的样式写的出了问题，就一直排查定位元素的样式，怎么都找不到问题所在。 ...
移动端页面移动问题
Vernal_F的专栏
09-25 284
移动端页面向左滑动会出现空白 解决方法： 在body上添加样式：overflow-x:hidden
【移动端H5】click事件和touch事件的区分
最新发布
weixin_57208584的博客
08-17 1143
touch事件是移动端区别于pc端触控的独有事件，也是实现很多手势的基础事件。它具体包含了：touchstart（触摸开始时触发）、touchmove（触摸并产生移动时触发）、touchend（触摸结束时触发）等一系列事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值