首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何保持div的溢出可滚动,但禁用任何其他触摸操作?

要保持div的溢出可滚动,但禁用任何其他触摸操作,可以通过CSS样式和JavaScript来实现。

首先,在CSS中设置div的样式,将其溢出部分设置为可滚动,并禁用其他触摸操作。可以使用以下样式:

代码语言:txt
复制
div {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
}

其中,overflow: auto;表示当内容溢出div时,显示滚动条;-webkit-overflow-scrolling: touch;是为了在移动设备上实现平滑滚动;touch-action: none;表示禁用所有触摸操作。

然后,可以使用JavaScript来禁用div上的其他触摸操作。可以通过以下代码实现:

代码语言:txt
复制
var div = document.querySelector('div');

div.addEventListener('touchstart', function(event) {
  event.preventDefault();
});

以上代码会监听div上的touchstart事件,并在事件发生时阻止默认行为,从而禁用其他触摸操作。

这样,通过设置CSS样式和使用JavaScript,就可以保持div的溢出可滚动,同时禁用其他触摸操作。

推荐的腾讯云相关产品:腾讯云移动推送(https://cloud.tencent.com/product/umeng_push)、腾讯云物联网通信(https://cloud.tencent.com/product/iot_explorer)、腾讯云云服务器(https://cloud.tencent.com/product/cvm)、腾讯云云数据库 MySQL 版(https://cloud.tencent.com/product/cdb_mysql)、腾讯云云存储(https://cloud.tencent.com/product/cos)、腾讯云区块链服务(https://cloud.tencent.com/product/tbaas)、腾讯云音视频处理(https://cloud.tencent.com/product/mps)。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

问题原因 能够猜想是文档(document)滚动事件被触发了,如果能禁用滚动事件就好办了。...)和缩放手势由浏览器专门处理,但是可以通过 CSS 特性 touch-action 来改变触摸手势行为。...manipulation 启用平移和缩放手势,禁用其他非标准手势,例如双击缩放。 pinch-zoom 启用页面的多指平移和缩放。...于是在 popup 元素上设置该属性,禁用元素(及其不可滚动后代)上所有手势就可以解决该问题了。...大意是说,在 touchstart 和 touchmove 事件中调用 preventDefault 方法可以阻止任何关联事件默认行为,包括鼠标事件和滚动。 因此我们可以这样处理。

43811

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

重点来了,既然该属性可以阻止元素成为鼠标事件,那么修改页面该属性值为 none,就能避免在滚动时鼠标频繁触发包括hover在内任何鼠标事件,从而提升了页面滚动性能。...顾名思义,该属性是用于设置触摸如何操纵元素区域动作,同样,touch-action 可以禁用浏览器在移动端处理手势事件,进而提高页面滚动性能,同时它还能解决移动端 点击延迟问题(很多人可能只知道viewport...不过需要注意是,虽然该属性也有 none 值,但在这里并不适用,因为"滚动"也属于手势一种,应该使用 manipulation 这个值,意为只允许进行滚动和持续缩放操作,也就相当于禁用其他页面手势...// 在需要时主动触发对全局手势禁用document.documentElement.style.touchAction = 'none'// 或者独立禁用某一片区域手势操作document.getElementById...(touch-action: none 会阻止任何触摸行为, touch 事件是正常触发)// 以下代码效果:在滑动时阻止系统默认事件,且页面可以正常滑动document.documentElement.style.touchAction

3.1K30

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

前言 通过阅读本文,你可以通过css 中overcroll-behavior属性值设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动发光和橡皮圈回弹效果,当然也可以看到css中 Houndini...(左边为原生拉到刷新操作,自定义拉到刷新,右边为原生拉到刷新操作刷新整个页面) 对于像Twitter PWA这样情况,禁用本地“拉动到刷新”操作可能是有意义。为什么?...开发人员最终编写不必要JavaScript,添加非被动触摸监听器(阻止滚动),或者将整个页面粘贴到100vw / vh中(以防止页面溢出)。...你可以使用它来取消滚动链接,禁用/自定义拉动到刷新操作禁用iOS上橡皮圈效果(当Safari实现超滚动行为时)等等。...(示例效果) 总结 本文主要是针对页面上滚动,自定义下拉刷新与溢出效果,通过css中overscroll-behavior:container阻止滚动链接,也就是在触发子元素事件操作时,不会传递给父级元素

3.3K20

探究 css touch-action 属性

使用 Touch_events 应用程序通过调用 preventDefault() 禁用浏览器处理手势,但也应使用触摸操作确保浏览器在调用任何事件侦听器之前,了解应用程序意图。...这意味着在实践中,触摸动作通常仅适用于具有某些自定义行为单个元素,而无需在该元素任何后代上明确指定触摸动作。 手势开始之后,触摸动作值更改将不会对当前手势行为产生任何影响。...值 auto 当触控事件发生在元素上时,不进行任何操作。 none 当触控事件发生在元素上时,不进行任何操作 pan-x 启用单指水平平移手势。...manipulation 浏览器只允许进行滚动和持续缩放操作任何其它被auto值支持行为不被支持。启用平移和缩小缩放手势,禁用其他非标准手势,例如双击以进行缩放。...禁用双击缩放功能减少浏览器在用户点击屏幕时延迟生成点击事件需要。 这是“pan-x pan-y pinch-zoom”(为了兼容性本身仍然有效)别名。

1.8K10

jimojianghu

此外,对 document 处理了滚轮事件后,因为该事件会传播冒泡,所以需要注意页面上其他子元素——如果有滚动条之类,需要在子元素上阻止冒泡,不然后滚动会失效。...用于设置触摸屏用户如何操纵元素区域,允许你在触控时控制滚动操作。 例如,浏览器内置缩放功能。 这样做好处还有,它可以允许你自己实现这些手势。...manipulation 这是pan-x pan-y pinch-zoom别名。 浏览器只允许进行滚动和持续缩放操作任何其它被auto值支持行为不被支持。...启用平移和缩小缩放手势,禁用其他非标准手势,例如双击以进行缩放。 禁用双击缩放功能减少浏览器在用户点击屏幕时延迟生成点击事件需要。...笔记本触摸板双指滑动,将响应滚轮事件,因此可以监听该事件,禁止触摸板手指缩放界面。 需要注意滚轮默认事件,如会导致子元素滚动失效,这时候就要在子元素上阻止相同事件冒泡。

3.7K00

(长文预警) 你还在烦工作中碰到拖拽问题?一个框架jiejue

特征 支持触摸设备和现代浏览器(包括IE9) 可以从一个列表拖动到另一个列表或在同一列表内 支持拖动手柄和可选文本(比voidberghtml5sortable更好) 智能自动滚动 高级交换检测 流畅动画...delayOnTouchOnly 选项 是否仅在用户使用触摸(例如,在移动设备上)时才应用延迟。在任何其他情况下,都不会延迟。...3到5之间值是好 disabled 选项 如果设置为,则禁用排序true var sortable = Sortable.create(list); document.getElementById...handle 选项 为了使列表项拖动,Sortable禁用用户文本选择。这并不总是可取。...交换插件 该插件修改了Sortable行为,以允许项目彼此交换而不是进行排序。一旦开始拖动,用户就可以将其拖动到其他项目上,并且元素不会发生任何变化。但是,用户放置项目将与原始拖动项目交换 ?

7K10

移动端H5坑位指南

可能在设计图对应分辨率移动设备下,背景会完美贴合显示,换到其他分辨率移动设备下就会出现左右空出1px到npx空隙。...在苹果系统上非元素滚动操作可能会存在卡顿,安卓系统不会出现该情况。...万年话题,如何控制文本做单行溢出和多行溢出?...首先明确解决滑动穿透需保持哪些交互行为,那就是除了弹窗内容能点击或滚动其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点,全部解决方案都能禁止滚动行为却引发其他问题。...该解决方案在视觉上无任何变化,完爆其他解决方案,其实就是一种反向思维和障眼法。该解决方案完美解决固定弹窗和滚动弹窗对全局滚动影响,当然也可用于局部滚动容器里,因此很值得推广。

3.4K10

如何使用 CSS 设置和自定义水平和垂直滚动

在本节中,我们将按照以下步骤创建一个滚动侧边栏导航:a)创建带有导航项目的导航栏b)将导航栏样式设置为侧边栏c)将侧边栏位置设置为固定d)使用滚动条管理项目的溢出a)....下面的截图显示了侧边栏与正常内容流分开:固定溢出侧边栏上面的侧边栏具有固定位置。页面的正文继续滚动侧边栏保持在用户视图中。...使用滚动条管理内容溢出防止导航项目显示在侧边栏之外非常简单。只需使用一行CSS代码即可完成此操作,该行代码使用overflow-y属性。...">6 7 页面在屏幕左下角有一个默认水平滚动条,您不希望网站用户使用它。...让我们继续下一节,我们将讨论如何设置滚动样式。自定义滚动条样式您希望为网站滚动条设置样式原因之一是为了在整个网页上实现颜色协调。您可能希望将在网站上使用颜色数量保持在一组最小值。

77900

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

可能在设计图对应分辨率移动设备下,背景会完美贴合显示,换到其他分辨率移动设备下就会出现左右空出1px到npx空隙。...在苹果系统上非元素滚动操作可能会存在卡顿,安卓系统不会出现该情况。...万年话题,如何控制文本做单行溢出和多行溢出?...首先明确解决滑动穿透需保持哪些交互行为,那就是除了弹窗内容能点击或滚动其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点,全部解决方案都能禁止滚动行为却引发其他问题。...该解决方案在视觉上无任何变化,完爆其他解决方案,其实就是一种反向思维和障眼法。该解决方案完美解决固定弹窗和滚动弹窗对全局滚动影响,当然也可用于局部滚动容器里,因此很值得推广。

4.2K21

如何实现一个丝滑点击水波效果

本文为Varlet组件库源码主题阅读系列第九篇,读完本篇,可以了解到如何使用一个div创建一个点击水波效果。...Varlet组件库提供了一个使元素点击时生成水波扩散效果指令: 点击 图片 接下来就从源码角度看看它是如何实现...比如touch事件或scroll事件默认行为都会触发页面的滚动,如果调用了preventDefault方法,那么就会阻止滚动问题是浏览器并不知道我们有没有在事件处理函数中调这个方法,那么就必须等待函数执行完毕才知道..._ripple as RippleOptions // 是否需要在触摸移动时禁用水波效果 if (!...到这里,当我们手触摸元素时,水波效果就创建完成了,接下来是移除操作,看一下removeRipple方法: const ANIMATION_DURATION = 250 function removeRipple

56320

移动开发实用

通常我们再滑屏页面,会调用eventpreventDefault()可以阻止默认情况发生:阻止页面滚动 touchend 当手指离开屏幕时触发 touchcancel 系统停止跟踪触摸时候会触发。...原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接, 此处浏览器会先捕获该次单击,浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...ios可以,android不行~ IE10(winphone8)表单元素默认外观如何重置 禁用 select 默认下拉箭头 ::-ms-expand 适用于表单选择控件下拉箭头修改,有多个属性值,.../a> 发短信,winphone系统无效 发短信 发短信给: 10086 模拟按钮hover效果 移动端触摸按钮效果,明示用户有些事情正要发生,是一个比较好体验...》 如何阻止windows Phone默认触摸事件 winphone下默认触摸事件事件使用e.preventDefault是无效 目前解决方法是使用样式来禁用 html{-ms-touch-action

6.4K30

一文带你响应式网页设计入门

这些设备特性包括: 网络连接方式 屏幕尺寸 交互类型(触摸屏,触摸板) 图形分辨率。 在响应式网页设计流行之前,许多公司在处理不同用户设备访问网站时,需要根据不同设备类型将用户重定向到不同站点上去。...因此,对于大于600px界面,我们column元素宽度相对其父元素50%。 虽然媒体查询对于响应式网页设计是必不可少许多其他CSS功能也在浏览器中得到广泛采用和支持。...在这种情况下,我们可以使用另一种技术-水平滚动。 使用内容溢出滚动条进行水平滚动 可能会有这样一种情况:您内容会溢出界面,而没有一种优雅处理方式去解决。...没关系,内容溢出滚动条可以为你解决这个问题。 此技术常见用途包括滚动菜单和表格。下面是一个滚动菜单示例。...another item overflow-y: scroll 这个CSS是关键,通过设置overflow,子元素将通过水平轴溢出并出现横向滚动

4.7K20

【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

“push”和所有其他导航操作预计路 线是这样:     itemWrapperStyle View#style         默认包为navigator中组件设置样式。...3.4 滚动视图         组件封装了滚动视图平台,同时提供了与锁定“应答”系统触摸集成。尚不支持其他来自阻止滚动视图成为响应者包含响应。...centerContent bool布尔型         当为真时,当内容小于滚动视图边界时,滚动视图自动集中内容;当内容大于滚动视图时,该属性没有任何影 响。默认值是false。...该系统 一个意想不到性质是任何节点都可以有font-size属性,包括一个。这是为了方便而设计,尽管语义 并不是正确。         ...3.11 无反馈触摸 3.11.1 成员函数     onLongPress函数     onPress函数         释放触摸时该函数被调用,如果触摸被取消则不调用(例如被窃取了应答器锁滚动取消

43840

H5 项目实用

font-family:Helvetica; 移动端如何定义字体font-family @ ————————————–中文字体英文名称 @ 宋体 SimSun @ 黑体 SimHei...,悠着点,如果操作不当,很危险,如果必须要用的话,想更新缓存时候,只能更改 demo_html.appcache 文件了!...//其他参数 ::-webkit-scrollba //滚动条整体部分 ::-webkit-scrollbar-thumb //滚动条内小方块 ::-webkit-scrollbar-track.../*说明:winphone下默认触摸事件事件使用e.preventDefault是无效,可通过样式来禁用,如:*/ html { -ms-touch-action:none; } //禁止winphone...默认触摸事件 // 阻止windows Phone默认触摸事件 /*说明:winphone下默认触摸事件事件使用e.preventDefault是无效,可通过样式来禁用,如:*/ html {

5.2K11

进入移动Web世界

这就是著名移动端300ms延迟问题。那么如何解决这个问题呢?tap事件处理。什么是tap事件?...事件属性 touches:跟踪触摸操作touch对象数组 targetTouches:特定事件目标的touch对象数组 changeTouches:上次触摸改变touch对象数组 c....每个touch对象包含属性 clientX:触摸目标在视口中横坐标 clientY:触摸目标在视口中纵坐标 identifier:标识触摸唯一id pageX:触摸目标在页面中横坐标(含滚动)...pageY:触摸目标在页面中纵坐标(含滚动) screenX:触摸目标在屏幕中横坐标 screenY:触摸目标在屏幕中纵坐标 target:触摸DOM节点目标 d....与此同时,要注意随之产生一个问题,就是组织默认事件后,页面也会随之禁止滚动,因此看情况使用。

1K20

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

快速反馈对于任何 UI 实现都是至关重要。研究表明,100ms 是界面让用户感到即时最大延迟。尽管如此,移动网络仍然受到一个巨大反馈问题困扰:触摸任何元素后,延迟 300 毫秒。...根据规范,CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素区域(例如,浏览器内置缩放功能)。...,不会执行任何操作。...touch-action: manipulation 规定浏览器只允许进行滚动和持续缩放操作任何其它被 touch-action: auto 支持行为不被支持。...启用平移和双指缩放手势,禁用其他非标准手势,例如双击缩放。 禁用双击缩放功能减少浏览器在用户点击屏幕时延迟生成点击事件需要。

2.8K20

Material Design — 菜单(Menus)

菜单 菜单形式是在短暂动作条上展示选项列表。 菜单出现在与按钮,操作其他控件交互中。菜单显示是一个一行只有一个选项选项列表。 如果不适用于某个情景,菜单项可能被禁用。...·与当前情景无关菜单项可能会被删除 ·与情景相关需要满足某些条件菜单项可能被禁用(如置灰)。 例如,当选择文本后,“复制”这个菜单选项才变为可选择项。...情景菜单 菜单是滚动 如果菜单高度阻止其显示所有菜单项目,菜单可以在内部滚动。 一个例子是在横向上查看手机上菜单。 ?...例如,重做在没有任何重做操作时被禁用。 剪切和复制在没有选择内容时不可用。 ? 不可用例子 ---- 行为 菜单出现在app内所有其他UI元素之上。 ?...·如果简单菜单中文本长到需要换行,就改为使用Simple Dialogs,因为可以有不同高度行(如下图)。 ? ·内容滚动时,菜单一直显示滚动条。

5.8K100

View编程指南(三)

隐藏view不会从系统接收触摸事件。但是,隐藏view会参与与view层次关联自动调整和其他布局操作。...例如,触摸事件报告每个触摸在windows坐标系中位置,view对象通常需要view本地坐标系中信息。...应用程序经常手动布置root view一个地方是在实现大滚动区域时。由于对其滚动内容拥有一个大view是不切实际,因此应用程序通常会实现一个root view,其中包含许多较小view。...每个图块代表滚动内容一部分。当滚动事件发生时,根view调用其setNeedsLayout方法来启动布局更改。其layoutSubviews方法然后根据发生滚动量重新定位平铺view。...当用户与滚动view交互时,大滚动区域可能会隐藏并显示切片子view。有关支持滚动内容更多信息,请参阅Scroll View Programming Guide for iOS。

1.7K30

Flutter完整开发实战详解(十八、 神奇ScrollPhysics与Simulation)

作为系列文章第十八篇,本篇将通过 ScrollPhysics 和 Simulation ,带你深入走进 Flutter 滑动新世界,为你打开 Flutter 滑动操作另一扇窗。...二、 ScrollPhysics 首先介绍 ScrollPhysics ,在 Flutter 官方介绍中,ScrollPhysics 作用是 确定滚动控件物理特性, 常见有以下四大金刚: BouncingScrollPhysics...:允许滚动超出边界,之后内容会反弹回来。...其实就是停止触摸时候,当 createBallisticSimulation 返回 null 时,Scrllable 将进入 IdleScrollActivity ,也就是停止滚动状态。...总结起来就是 ScrollPhysics 中控制了用户触摸转化和边界条件,并且在用户停止触摸时,利用 Simulation 实现了自动滚动溢出回弹动画效果。 自此,第十八篇终于结束了!

13.8K61

Material Design — 提示框( Dialogs)

左:提示框内容    右:全屏提示框 滚动内容例外 一些提示框内容需要滚动,例如铃声列表。 对于滚动选项列表,提示标题仍固定在顶部。...这可保证了无论项目在列表中什么位置,被选项与标题均保持可见。 否则,标题会随内容一起滚动离开视野。 内容滚动时,操作始终保持原位。 提示框与底层父级材料是分开,不会随其滚动。 ?...标题与被选操作保持可见 显示额外内容 要在提示框中展示额外内容,请在内容区域内使用内联展开。 或者考虑能对大量内容进行优化替代组件。...例如,用户可以聆听多个铃声,只能在触摸“ok”时进行最终选择。 点击确认对话框中“取消”,或按Android“后退”,取消操作,放弃所有更改并关闭对话框。 ?...触摸“X”会放弃所有更改并退出提示框。 全屏对话框实现复杂布局,将多个材料堆积情况简化(提示框上层提示框),并暂时将app感知海拔重置为更高。

5K101
领券