开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用addEventlistener在移动设备上启用/禁用身体滚动

在移动设备上，可以使用addEventlistener方法来启用或禁用身体滚动。身体滚动是指在移动设备上通过触摸屏幕上下滑动来滚动页面内容。

要启用或禁用身体滚动，可以按照以下步骤进行操作：

首先，使用JavaScript获取到要操作的DOM元素，通常是<body>标签或包含页面内容的容器元素。
使用addEventlistener方法为移动设备的触摸事件（例如touchstart、touchmove、touchend）添加事件监听器。
在事件监听器中，根据需要启用或禁用身体滚动。可以通过以下两种方式实现：

a. 启用身体滚动：在事件监听器中使用preventDefault方法阻止默认的滚动行为。例如，可以在touchmove事件监听器中调用event.preventDefault()来阻止页面滚动。

b. 禁用身体滚动：在事件监听器中使用preventDefault方法阻止默认的滚动行为，并且使用stopPropagation方法停止事件冒泡。例如，可以在touchmove事件监听器中调用event.preventDefault()和event.stopPropagation()来阻止页面滚动并停止事件传播。

以下是一个示例代码，演示如何使用addEventlistener在移动设备上启用/禁用身体滚动：

// 获取要操作的DOM元素，这里以<body>标签为例
var bodyElement = document.querySelector('body');

// 添加touchmove事件监听器
bodyElement.addEventListener('touchmove', function(event) {
  // 阻止默认的滚动行为，启用身体滚动
  event.preventDefault();
});

// 添加touchstart和touchend事件监听器
bodyElement.addEventListener('touchstart', function(event) {
  // 阻止默认的滚动行为，并停止事件冒泡，禁用身体滚动
  event.preventDefault();
  event.stopPropagation();
});

bodyElement.addEventListener('touchend', function(event) {
  // 阻止默认的滚动行为，并停止事件冒泡，禁用身体滚动
  event.preventDefault();
  event.stopPropagation();
});

这样，当在移动设备上触摸屏幕并滑动时，可以根据需要启用或禁用身体滚动。

请注意，以上示例代码仅为演示目的，实际使用时可能需要根据具体情况进行适当的修改和调整。

关于移动设备上启用/禁用身体滚动的更多信息，您可以参考腾讯云的相关产品和文档：

腾讯云移动开发平台：https://cloud.tencent.com/product/mwp
腾讯云移动开发文档：https://cloud.tencent.com/document/product/876

相关搜索:Fancybox在移动设备上的滚动问题 Javascript在移动设备上冻结身体(不允许任何滚动等)Material UI Autocomplete -禁用键盘输入(在移动设备上)Squarespace:仅在移动设备上禁用视差滚动 Swiper -无法在移动设备上禁用触摸使用JavaScript在移动设备上禁用谷歌AdSense 使用twitter引导时，在移动设备上禁用响应时出错使用可滚动组件防止在移动设备中滚动在移动设备上消除水平滚动条在移动设备上禁用fancybox图像的收缩缩放

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

使用 TFLite 在移动设备上优化与部署风格转化模型

，以及如何通过 TensorFlow Lite 在移动应用中高效使用该模型。...因此，我们需要继续优化模型，在移动应用中也适合使用。本文将会分享我们的优化经验，并提供一些资源供您在工作中使用。...此外，在使用 GPU delegate 运行模型时，TF Lite 解释器初始化、GPU 代理初始化和推理必须在同一线程上运行。...tensorflow.google.cn/lite/performance/gpu 生产中的风格转化 Google Arts & Culture 应用中最近添加了 Art Transfer，将利用 TensorFlow Lite 在设备上运行风格转化...资源在设备上运行机器学习模型具有以下优势：保护用户数据隐私，且功能启用时延迟较低。

1.6K2 0

jimojianghu

在以前，如果要禁止移动端设备的触摸屏上，手指缩小放大的功能，都会想到使用viewport 来处理。...none 当触控事件发生在元素上时，不进行任何操作。 pan-x 启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。...浏览器只允许进行滚动和持续缩放操作，任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。...passived 实际上就是告诉浏览器，某个事件监听是否会使用 preventDefault 来阻止默认行为，便于浏览器优化性能。特别是浏览器优化页面滚动时的性能，可以让页面滚动更顺滑。...可能的发生情景：移动端使用touch事件后，垂直平移时的报错。

3.7K0 0

【总结】1823- 移动端滚动穿透与滚动溢出解决方案

滚动穿透问题描述在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的...DOM元素上一样，我们姑且称之为滚动穿透。...问题原因能够猜想是文档（document）的滚动事件被触发了，如果能禁用滚动事件就好办了。...值描述 auto 启用浏览器处理所有平移和缩放手势。 none 禁用浏览器处理所有平移和缩放手势。 manipulation 启用平移和缩放手势，但禁用其他非标准手势，例如双击缩放。...pinch-zoom 启用页面的多指平移和缩放。于是在 popup 元素上设置该属性，禁用元素（及其不可滚动的后代）上的所有手势就可以解决该问题了。

3971 1

移动端点击事件延迟的诞生消亡史

在本文中，本文将带你了解移动端点击事件延迟的从诞生到消亡的过程。...诞生史在 2007 年，苹果公司发布首款 iPhone 之前，由于当时的网站普遍为大屏幕设备所设计，为了应对 iPhone 这种小屏幕设备浏览桌面网站的问题，由此，苹果引入了多项变革，其中就包含了“双击缩放准确定位正文主体...这项技术的另一个关键在于，它仅消除了双击缩放的功能，用户依然可以使用双指缩放功能。因此，不存在与禁用缩放相关的可用性和可访问性问题。...关于 FastClick 的好处是，它非常容易使用，只需在文档加载后调用 FastClick.attach() 在 body 元素上实例化： if ('addEventListener' in document...启用平移和双指缩放手势，但禁用其他非标准手势，例如双击缩放。禁用双击缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。

2.7K2 0

控制页面的滚动:自定义下拉到刷新和溢出效果

前言通过阅读本文,你可以通过css 中overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css中 Houndini...使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动背景滚动边界和滚动链接滚动是与页面交互的最基本的方式之一，但是由于浏览器的诡异默认行为...当用户点击滚动边界时，某些应用可能希望提供不同的用户体验 ? （在Chrome Android上滚动链接）拉到刷新效果拉到刷新是一种直观的手势，通过Facebook和Twitter等移动应用推广。...事实上，这种特殊用户体验非常流行，以至于Android这样的移动浏览器都采用了相同的效果。向下滑动页面顶部会刷新整个页面 ? ?...你可以使用它来取消滚动链接，禁用/自定义拉动到刷新操作，禁用iOS上的橡皮圈效果（当Safari实现超滚动行为时）等等。

3.2K2 0

学会一行CSS即可提升页面滚动性能

body { pointer-events: none;}使用滚动监听事件可实现灵活控制：let timer = nullwindow.addEventListener("scroll", function...顾名思义，该属性是用于设置触摸屏如何操纵元素区域动作，同样的，touch-action 可以禁用浏览器在移动端处理手势的事件，进而提高页面滚动性能，同时它还能解决移动端点击延迟问题（很多人可能只知道viewport...不过需要注意的是，虽然该属性也有 none 值，但在这里并不适用，因为"滚动"也属于手势的一种，应该使用 manipulation 这个值，意为只允许进行滚动和持续缩放操作，也就相当于禁用了其他页面手势...全局生效要写在 html 上：html { touch-action: manipulation;}类似的，如果移动端有自定义拖动的需求，也可以用这个 CSS 来优化性能，当我们需要完全阻止原生touch...// 在需要时主动触发对全局的手势禁用document.documentElement.style.touchAction = 'none'// 或者独立禁用某一片区域的手势操作document.getElementById

3.1K3 0

【兼容性】H5滚动穿透解决方案

; } PC 可以，但是对移动端无效那么我们限制body不超过一屏，那么自然就不能滚动了？...，这样就可以避免页面的跳动，但是直接给 html 设置 absolute 风险太大，容易埋坑，不太建议大项目使用，小应用还是可以的，我在需求的小活动页7就使用过这种方式 5禁用页面滚动除了在 css...中在监听回调更新了参数，如果你不加上这个参数，那么可能这样并不能禁用页面滚动具体如下以前 addEventlisener 参数是 target.addEventListener(type, listener.../zhuanlan.zhihu.com/p/24555031 所以我们禁用页面滚动，可能得这么写，告诉浏览器我们需要禁用滚动 document.addEventListener( 'touchstart...这个问题测试了，只在 ios 中存在，滚动穿透的顺序是子->父->document，而安卓和鸿蒙则不会，子滚不了，直接滚document 这个是实际的dom 父子关系才会，视觉上的父子关系没有这个问题

5.1K2 0

如何深入理解 JavaScript 中的懒加载

优化移动浏览和改善用户体验：移动设备通常具有有限的处理能力和网络功能。通过采用延迟加载，网站适应这些限制，提供更流畅的体验并减少数据消耗，使其更适合移动设备。...然而，两种广泛使用的技术是使用Intersection Observer API来延迟加载图像，以及在滚动事件中实现内容的延迟加载。...然后，我们使用 window.addEventListener("scroll", lazyLoadContent) 将 lazyLoadContent() 函数附加到滚动事件上。...为JavaScript禁用的用户提供备选方案：并非所有用户都在其浏览器中启用了JavaScript。为了满足这些用户的需求，为延迟加载的内容提供备选解决方案。...在各种设备、浏览器和网络速度上彻底测试：在将懒加载应用到实际网站之前，请在各种设备、浏览器和网络速度上彻底测试其实施。在台式机、笔记本电脑、平板电脑和智能手机上进行测试，以确保行为和响应性的一致性。

2753 0

移动端的touch事件处理

在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。...触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。...使用原生的滚动事件Android 4.0 以下是不支持原生的 webview 滚动的，所以只能使用 iscroll 之类的工具来模拟元素滚动。...禁用页面整体拖动IOS下默认情况下用户的拖动操作在scroll滚到头以后会导致整体页面的滚动，一种方式是禁用掉 document 的 touchmove 原生触发document.addEventListener...('touchmove', function(e) { e.preventDefault();});此时原生的滚动是无法工作的，解决办法就是禁用滚动元素的 touchmove 事件冒泡scrollable.addEventListener

1.6K2 0

移动端H5坑位指南

HTML方向调用系统功能使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。...唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。...* { -webkit-tap-highlight-color: transparent; } 复制代码禁止动画闪屏在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。...在移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟，后续又出现fastclick。

3.4K1 0

中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

HTML方向调用系统功能使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。...唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。...* { -webkit-tap-highlight-color: transparent; } 禁止动画闪屏在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。...在移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟，后续又出现fastclick。

4.2K2 1

H5 项目实用

---- 20、在Android 上想不显示语音输入按钮，怎么办？...//1.禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰 select::-ms-expand { display:none; } //2.禁用radio...font-size选择px还是rem // 如需适配多种移动设备，建议使用rem。...-webkit-scrollbar-corner //边角，两个滚动条交汇处 ::-webkit-resizer //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件...上无法使用，在PC端正常 //2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间 ---- 33、重力感应事件 // 运用HTML5

5.2K1 1

📚一站式解决：H5开发全攻略，看这篇让你省时又省力

和transform-style属性，可以解决在移动设备上动画闪屏的问题，提供更流畅的动画效果。...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题现象在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...原因这是因为移动设备的物理像素密度与 CSS 像素的比例（设备像素比）导致的。解决方案利用伪元素和 scale 来实现 0.5px 的效果。...设备上，点击 input 框弹出键盘时，可能会将页面顶起来，导致页面样式错乱。...disableScroll(); } // 示例使用，当某个事件触发时启用滚动穿透 function enableScrollEvent() { enableScroll(); } ant-mobile

3562 0

移动端爬坑记 --- （1）布局与样式上的奇葩偶遇

有些android不带这个很奇葩【错乱】，且不要使用margin:0 auto【作用于子元素】在滚动包裹层添加这么一条私有前缀样式即可享受类似APP的滑动效果，不仅丝滑，还带弹性！...].clientY; }); content.addEventListener('touchmove', function (e) { // 高位表示向上滚动 // 底位表示向下滚动...或者animation也会 transition闪屏 /设置内嵌的元素在 3D 空间如何呈现：保留3D / -webkit-transform-style: preserve-3d; / 设置进行转换的元素的背面在面对用户时是否可见...，体验非常糟糕，，遇到过好几次页面有滚动区域的建议引入iscroll5，可以避免很多天坑页面应该尽可能的减少复杂的DOM【一个功能点，DOM结构越直白，越好维护】，复杂DOM会增加维护难度考虑移动端响应布局...，建议引入阿里巴巴出品的lib-flexible , IOS动态调整DPR，其他设备默认DPR1 点透事件可以引入fastclick或者不用click，改为touch来写，亦或者引入zepto的tap事件

911 0

input输入框禁用移动端调起键盘事件

要禁用移动端的软键盘弹出事件，可以使用 readonly 属性或 disabled 属性来设置输入框的状态。阻止移动设备上的软键盘弹出，同时仍然允许用户通过其他方式填充输入框。...使用 disabled 属性：通过将输入框禁用，移动设备上的软键盘将不会弹出，并且用户无法对其进行任何操作。...这些方法只能禁用软键盘的弹出，无法完全阻止用户在移动设备上输入内容。用户仍然可以通过剪贴板、语音输入等方式输入文本。...问题：移动端事件input输入框日历组件滚动选择日期会有键盘弹出怎么在滚动选择时间的时候禁用键盘弹出在移动端的滚动选择组件中，如果你希望在滚动选择时禁用键盘弹出，可以尝试使用以下方法：...这些方法可以帮助你在滚动选择组件中禁用移动端键盘的弹出

8783 0

移动端事件穿透的原理与解决方案

移动设备的流行，带动了移动互联网的快速发展，很多开发者开始进入移动开发领域。...目前市面上主流的移动设备一般都使用触摸屏，触摸屏所使用的触摸事件模型与传统网页的鼠标事件模型有所区别，这种差异往往使初涉移动端的开发工程师陷入困境，事件穿透问题便是其中一个，本文将带你了解事件穿透及如何在实际项目中选择合适的方案解决事件穿透问题...产生的原因当今，主流的移动设备一般都使用触摸屏，Web 应用程序可以使用触摸事件（Touch Events）直接处理基于触摸的输入，或者应用程序可以使用可解释的鼠标事件以处理应用程序的输入。...在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...在实际项目开发中，纯移动端项目优先推荐禁用 click 事件的方法，多端项目优先推荐禁用 touch 事件的方法。

1.3K2 0

10-移动端开发教程-移动端事件

在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....touch相关的事件跟普通的其他dom事件一样使用，可以直接用addEventListener来监听和处理。...2.1 touch事件与click事件同时触发在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...因为双击缩放检测的存在，在移动设备屏幕上点击操作的事件执行顺序： touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件，可以调用 event.preventDefault...与 clientY 不同的是，他包括上边滚动的距离，如果有的话。 8. target 总是表示手指最开始放在触摸设备上的触发点所在位置的 element。

6.7K8 0

10-移动端开发教程-移动端事件

在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....touch相关的事件跟普通的其他dom事件一样使用，可以直接用addEventListener来监听和处理。...2.1 touch事件与click事件同时触发在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...因为双击缩放检测的存在，在移动设备屏幕上点击操作的事件执行顺序： touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件，可以调用 event.preventDefault...与 clientY 不同的是，他包括上边滚动的距离，如果有的话。 8. target 总是表示手指最开始放在触摸设备上的触发点所在位置的 element。

6.3K7 0

「JavaScript 」动画基础 - 03

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault(); 1.2. 移动端常见特效 1.2.1 案例: 移动轮播图移动端轮播图功能和基本PC端一致。...该属性用于在元素中添加，移除及切换 CSS 类。...e.preventDefault(); // 阻止滚动屏幕的行为 }); // 手指离开根据移动距离去判断是回弹还是播放上一张下一张 ul.addEventListener('touchend...解决方案： 1、禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。...移动端视频插件 zy.media.js 框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

1.1K2 0

【Android】WebView 应用模版 ( WebView 设置 | 设置 WebSettings | 启用调试模式 | 设置 WebChromeClient )

启用 DOM 存储可能会占用更多的设备存储空间，因此您应该在必要时使用它，并在不需要时禁用它。...启用内置缩放控件可以提高用户的体验，使其更容易在移动设备上浏览网页。如果网页已经自适应了移动设备的屏幕大小并且用户可以通过双指捏合手势来缩放网页，那么不需要启用此选项。...Viewport 元标记是指在 HTML 页面中的标签，可以设置网页在移动端设备上的显示方式和缩放比例。...使用场景 : 如果您的网页在宽屏幕上显示得很好，但在狭窄屏幕上缩放过大或过小，您可以启用此选项。...// 设置页面自适应 // Viewport 元标记是指在 HTML 页面中的标签 , 可以设置网页在移动端设备上的显示方式和缩放比例 // 设置是否支持

2.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭