如何保持div的溢出可滚动，但禁用任何其他触摸操作？ - 腾讯云开发者社区

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

6091 1

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

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

3.2K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

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

3.5K2 0

探究 css touch-action 属性

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

1.8K1 0

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

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

7.2K1 0

jimojianghu

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

3.8K0 0

移动端H5坑位指南

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

3.5K1 0

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

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

1.9K0 0

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

4.4K2 2

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

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

6082 0

移动开发实用

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

6.5K3 0

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

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

4.8K2 0

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

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

5864 0

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.3K1 1

React 拖拽排序组件 Draggable Sortable

React作为流行的前端框架，提供了丰富的工具和库来实现这一功能。本文将由浅入深地介绍React中拖拽排序组件的常见问题、易错点及如何避免，并通过代码案例进行解释。...二、基础知识（一）拖拽排序的概念拖拽排序允许用户通过鼠标或触摸手势将列表项从一个位置移动到另一个位置，从而改变它们的顺序。...滚动条卡顿当列表较长且包含滚动条时，拖拽操作可能导致滚动条卡顿。解决方案：可以通过CSS设置overflow: auto，并在拖拽过程中禁用默认的滚动行为，使用自定义的滚动逻辑。...解决方案：使用slice()、concat()等方法创建新数组，或者使用immer库简化不可变操作。状态更新延迟如果状态更新没有及时反映在UI上，可能是由于异步操作或批量更新导致的。...在拖拽过程中禁用默认滚动行为，并使用自定义滚动逻辑。

880 0

进入移动Web世界

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

1K2 0

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

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

2.9K2 0

Material Design — 菜单（Menus）

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

5.8K10 0

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.8K3 0

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

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

15.5K6 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

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

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

探究 css touch-action 属性

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

jimojianghu

移动端H5坑位指南

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

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

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

移动开发实用

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

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

H5 项目实用

React 拖拽排序组件 Draggable Sortable

进入移动Web世界

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

Material Design — 菜单（Menus）

View编程指南(三)

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

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐