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

避免在导航栏打开时使用触摸滚动页面

在导航栏打开时避免使用触摸滚动页面是为了提高用户体验和页面性能。当导航栏打开时,用户通常会进行导航操作,此时如果页面仍然可以通过触摸滚动来滚动页面,可能会导致用户误操作或者页面滚动不流畅。

为了避免在导航栏打开时使用触摸滚动页面,可以采取以下几种方式:

  1. 禁用页面滚动:在导航栏打开时,可以通过JavaScript禁用页面的滚动功能,防止用户通过触摸滚动页面。可以使用document.body.style.overflow = 'hidden'来禁用页面滚动,导航栏关闭时再恢复滚动。
  2. 固定导航栏位置:将导航栏固定在页面的顶部或底部,不随页面滚动而移动。这样即使用户在导航栏打开时进行滚动操作,也不会影响导航栏的显示和操作。
  3. 使用模态框或抽屉式导航:在导航栏打开时,可以使用模态框或抽屉式导航来展示导航内容,这样用户在导航栏打开时无法通过触摸滚动页面,只能在导航框内进行操作。
  4. 提供导航栏关闭按钮:在导航栏打开时,应该提供一个明显的关闭按钮,方便用户随时关闭导航栏。这样用户在导航栏打开时,如果不需要导航操作,可以直接关闭导航栏,避免误操作。

以上是避免在导航栏打开时使用触摸滚动页面的一些方法和建议。在实际应用中,可以根据具体情况选择适合的方式来提升用户体验。腾讯云提供了丰富的云计算产品和解决方案,可以根据具体需求选择适合的产品进行开发和部署。

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

相关·内容

最新iOS设计规范四|3大界面要素:视图(Views)

(Bars) ,可以告诉用户APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...页面视图控制器可以使用滚动页面卷曲两种样式的任意一种完成页面之间的转场过渡。 ? 如果需要,可以自定义一种非线性的导航方法。使用页面视图控制器页面只能按顺序跳转,而跨页面之间是无法跳转的。...如果可能的话,让用户一次点击中关闭一个浮层,同时打开另一个浮层。避免额外的点击,尤其是需要在多个不同的项目打开浮层避免浮层太大。浮层不应该占据整个屏幕,足以显示其内容并指向触发按钮即可。...当滚动视图的缩放选项被打开,设置比较合适的最大及最小值。例如:放大文本直到一个单一的字符充满整个屏幕,即使其可能对于大部分应用来说是没有意义的。 当滚动视图处于页面模式考虑显示页面控制元素。...用户经常会在滚动使用非常大幅度的动作,如此便会非常难以避免同一屏幕中对相邻的滚动视图进行交互操作。

8.4K31

最新iOS设计规范五|3大界面要素:控件(Controls)

(Bars) ,可以告诉用户APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...系统按钮 系统按钮通常出现在导航和工具中,也可以在任何地方使用。 ? 标题中使用动词。特定于操作的标题显示按钮是交互式的,并说明单击该按钮时会发生什么。 使用标题格式命名标题。...用户可以通过系统定义的触摸并按住或3D Touch来显示情境菜单,(3D Touch可以使情境菜单更快地显示)。打开,情境菜单将显示该项的预览并列出对其起作用的命令。...否则请使用加载器(转菊花)。 将进度条用于持续时间明确的任务。进度条非常适合显示任务的状态,尤其是当它帮助传达任务需要完成多长时间导航和工具中隐藏轨道的未填充部分。...如果你需要工具导航使用类似功能,请改用按钮,并提供两个不同的图标来传达不同的状态。 避免开关中添加说明标签。关于开关的打开或关闭,用户是很明确的。

8.5K30
  • Material Design — 底部导航(Bottom Navigation)

    点击底部导航的图标可以:1、直接将你带到相关页面;2、刷新当前页面。 底部导航主要用于移动端,为了pc端实现类似效果,可以使用侧边导航。...避免长文本标签。 ---- 行为(这部分的动图去MD的网站看吧...) 底部导航可以从一个主题中的n级页面移动到另一个主题的一级页面。...当用户去往下级页面要保持底部导航可用,可通过持续展示,或者通过滚动隐藏和显示。 底部导航不应用于: ·专注于单一任务的观点,如电子邮件“撰写”页面。...滚动 底部导航滚动可以动态地出现和消失: ·向下滚动隐藏底部导航 ·向上滚动显示 手势 在内容区域上使用左右滑动手势不会在一级页面之间切换。...点击icon进行切换也该避免横向切换页面之间转换(如左右推进)。

    4K90

    Material Design — 提示框( Dialogs)

    这可保证了无论项目列表中什么位置,被选项与标题均保持可见。 否则,标题会随内容一起滚动离开视野。 内容滚动,操作始终保持原位。 提示框与底层父级材料是分开的,不会随其滚动。 ?...左图为带选择控件的提示框 避免使用提示框启动提示框 确认提示框应避免启动其他简单提示框或简单菜单,因为它们增加了页面复杂性并会增加了app的海拔。 如果需要完成任务,可以使用全屏提示框。...全屏对话框允许任务复杂操作开启简单菜单或简单提示框。...左:不要用“关闭”这样的词作为确认    右:离开进行提示 导航 全屏幕对话框中使用的“X”不同于向返回箭头,箭头能表示视图的状态实时被保存。...如果全屏对话框使用长度可变的标题或预期到可能会有长标题(例如,因为某些单词不同的语言中较长),请将标题文本置于对话框的内容区域而不是最上面的导航。 ? 不该在导航使用长标题

    5.1K101

    UI Tabbar底部标签设计全攻略

    本文中,我将分享设计标签要记住的 7 件事。...❌ 导航选项太多。与拇指(红色圆圈)相比,触摸目标(导航选项)太小。 该怎么办: 如果您只有两个顶级导航选项,则可以进行分段控制。 如果您有五个以上的导航选项,则很有可能并非所有选项都是最重要的。...您可以评估导航选项,如果您仍然有五个以上的目的地,您可以使用像汉堡菜单这样的控件。 3. 不要设计可滚动的标签滚动的标签会损害可发现性。...由于一次并非所有导航选项都可见,因此用户可能很容易错过重要选项。另外,当用户滚动标签,当前位置可能会消失。 ❌ 可滚动的标签 4....这就是为什么要尽量避免选项之间使用花哨的转换。

    1.9K30

    m001mac初级篇之常用快捷键

    标签和网页导航快捷键 8 个 切换到下一个标签页 – Control+Tab   切换到上一个标签页 – Control+Shift+Tab   向下滚动一屏 – 空格   向上滚动一屏 – Shift...查看页面源代码 – Command+Option+U   禁止弹出窗口 – Command+Shift+K 查找并在找到的项目中导航的快捷键 3 个   页面上查找文字 – Command+F   向下浏览找到的项目...:将文件移至废纸篓 Command-Shift-Delete:清倒废纸篓 空格键:快速查看选中的文件,也就是预览功能 safari浏览器补充 上下方向键 小范围的垂直滚动页面 左右方向键 小范围的水平滚动页面...Option -点击 下载文件 Shift-点击添加书签按钮 添加当前页面到书签菜单 地址 Cmd-回车 或者 Cmd-Shift-回车 新窗口或者标签打开 搜索 Cmd-回车 或...Cmd-Shift-回车 新窗口或者标签打开搜索结果 Safari快捷键:菜单快捷键 Cmd-A 全选 Cmd-B 显示/隐藏收藏 Cmd-D 添加书签 Cmd-E 使用所选进行查找 Cmd-F

    1.5K80

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

    1.3 iOS导航器         iOS导航器包装了UIKit导航,并且允许你添加跨应用程序的back-swipe功能。 1.3.1 路线         路线是用于描述导航器每个页面的一个对象。...一个常见的用例是为每一页设置backgroundColor     tintColor字符串型导航中的按钮使用的颜色 1.4 iOS选择器 1.4.1 Props onValueChange 函数型...工具可以显示一个标志,导航图标(如汉堡包菜单),标题 和副标题和操作列表。标题和子标题被扩展这样以来标志和导航图标显示左边,标题和副标题在中间并且操作 右边。         ...轻击状态滚动视图会滚动到顶部。...3.11 无反馈触摸 3.11.1 成员函数     onLongPress函数     onPress函数         释放触摸该函数被调用,但如果触摸被取消则不调用(例如被窃取了应答器锁的滚动取消

    53540

    远程调试 Android 设备使用入门

    您的开发计算机上打开 Chrome。您应使用您的一个 Google 帐户登录到 Chrome。 远程调试隐身模式或访客模式下无法运行。 打开 DevTools。...image.png 打开远程设备抽屉式导航 DevTools 中,点击 Settings 标签(如果正在显示另一个标签)。 确保已启用 Discover USB devices。...(10)],然后您的 Android 设备屏幕上点按此元素。 请注意,Select Element 将在第一次触摸后停用,因此,每次想要使用此功能您都需要重新启用它。...要滚动,请使用您的触控板或鼠标滚轮,或者使用您的鼠标指针抛式滚动。 关于抓屏的一些注意事项: 抓屏仅显示页面内容。...抓屏的透明部分表示设备界面,如 Chrome 多功能框、Android 状态或 Android 键盘。 抓屏会对帧率产生负面影响。测量滚动或动画停用抓屏,以更准确地了解页面的性能。

    1.1K30

    Macbook Pro 2017 13-inch

    人们可能会瞥一眼触控以定位或使用控件,但他们的主要焦点是主屏幕。触控不应显示警报、消息、滚动内容、静态内容或其他任何会分散人们对主屏幕的注意力的内容。 努力匹配物理键盘的外观。...始终为人们提供使用键盘或触控板执行任务的方法。 全屏环境中,考虑触控中显示相关控件。全屏模式下,应用程序通常会隐藏屏幕控件并仅在人们通过例如将指针移动到屏幕顶部来调用它们才显示它们。...它也不应该包含复制基于键的导航的控件,例如向上翻页和向下翻页。 准确反映出现在触控和主屏幕上的控件状态。例如,如果一个按钮主屏幕上不可用,则它不应该在触控中可用。...响应用户交互避免 Touch Bar 和主屏幕中显示相同的 UI。例如,当人们邮件的新消息窗口中单击屏幕上的表情符号和符号按钮,他们希望字符查看器主屏幕上打开,而不是触控打开。...除非人们两个地方都使用相同的控件进行交互,否则请避免通过显示冗余 UI 来分散人们的注意力。

    1.1K40

    iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

    以下有一些方法可以让滚动的内容能正常显示状态 后面: 使用导航控制器(navigation controller)来展示内容。导航控制器自动展示状态背景,同时能确保内容视图不会出现在状态后面。...页面视图控制器: 带滚动条的页面视图控制器没有默认的外观。 带翻页效果的控制器可以两页中间增加书脊(book spine)的效果 可以根据指定的转场来模拟出页面切换的动画。...使用滚动条效果的时候,当前页面滚动到下一页;而使用翻页效果页面上会出现一个模拟实体书或笔记本翻页效果的翻页动画 使用页面视图控制器来展示那些线性的内容(比如一个故事的文本),或者是一些可以被自然地拆分成块的内容...当用户视图中拖拽内容,内容随之滚动;当用户轻扫屏幕,内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部停止。...页模式滚动视图中,可以考虑使用页面控件(page control)。当你想要展示分页、分屏或者分块的内容,可以使用页面控件来让用户知道当前内容一共有多少块,以及他们当前浏览的是第几个。

    10.1K51

    如何使用CSS中的固定定位属性?

    文章通过一个示例演示了如何实现固定定位的导航,并提到了使用固定定位属性需要注意的几点问题。...固定在页面顶部的导航示例 下面我们以一个固定在页面顶部的导航为示例,演示如何使用固定定位属性。...这样, .content 就会在导航下方出现,避免页面内容被导航遮挡的问题。 通过上述代码,我们实现了一个固定在页面顶部的导航。...使用固定定位属性的注意事项 使用固定定位属性,需要注意以下几点: 固定定位的元素脱离了正常的文档流,所以不会影响其他元素的布局。但要注意避免元素重叠覆盖其他内容。...移动设备上,固定定位属性可能有性能问题,并且页面滚动过程中有时会出现闪烁的情况。所以,移动设备上使用固定定位要慎重考虑。

    36310

    Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

    避免对次要和消极的操作使用浮动操作按钮,包括以下内容: ·存档或清空 ·不明确的行为 ·警告或错误 ·有限制的任务,如剪切文本 ·应该在工具中的控件,如音量控制或更改字体颜色 浮动操作按钮不包含应用...触发 悬浮响应式按钮可以简单地触发动作或在某处导航触摸波动的动画向外扩展导致UI变化。 工具 浮动动作按钮可以在按下变换成工具。...滚动就消失的工具适用于: ·最开始进入时需要完整工具的屏幕 ·长列表顶部或底部需要完整工具的屏 当用户通过滚动表示他们有兴趣查看主要内容,节省了屏幕空间。...同一地点点击应激活最常用的操作或关闭打开的菜单。 ? 悬浮响应式按钮可以转换为包含所有动作的单张材料。 ? 一般规则是,按下时至少有三个选项,但不能超过六个,包括原始悬浮响应式按钮目标。...将溢出操作置于工具中的溢出菜单中,而不是悬浮响应式按钮中。 ? 如果app的特点是添加文件类型,浮动操作按钮可以第一次触摸后转换为相关操作。

    5.7K90

    Mac下提升工作效率的方式

    全屏工作环境 Macbook屏幕都比较小,再除去顶部状态,和底部dock,所剩下的展示区域就非常少了,可视区域变小必然会导致更频繁的窗口滚动操作。...我个人习惯把状态,dock都自动隐藏,这样可以需要长时间高注意力工作产生更高的效率,比如写代码可以xcode里看到更多的代码,比如编辑文字的时候不用频繁的上下滚动。...将应用全屏最大的好处在于避免注意力被其他的信息分散掉。当然全屏之后要切换出当前的工作环境就需要其他工具的辅助。 应用切换神器Snap 上面提到dock一般被我隐藏,但dock上有我最常用的app。...被忽视的触摸板 不少人都会觉得macbook的触摸板非常灵敏好用,单指轻触就可以完成鼠标的单击效果,双指轻触右半部分显示菜单,双指上下滑动可以完成页面的上下滚动,双指从右侧滑动呼出通知中心,四指朝外扩散可以显示桌面...后来开始使用Chrome,Chrome速度上完胜Firefox,浏览体验非常棒,稳定性也比Firefox好些。做一些简单的web页面调试的时候也很方便。现阶段使用频次也比较高。

    1.3K30

    Material Design — 底部动作条(Bottom Sheets)

    当显示菜单项,完全扩展的模态底部动作条与app 导航的最底端要保持最小8dp的距离。 ?...但是,这些深层链接可能不允许用户在打开的app中导航:它们可能只停留在初始层级,更深入,或者返回到初始层级。 或者,深层链接可以将用户从底部动作条导航到另一个视图。...为了使底部动作条中的的深层链接向上导航,通过溢出菜单提供一个明确的链接来打开app。底部动作条中的动作可能会导致打开父级app,比如使用“添加联系人”操作。...左:长列表可滚动,最多16:9    右:不能与导航重叠,保留一个区域让用户取消它 平板/pc(并不适用) 考虑大屏幕上选择别的组件替代模态底部动作条,因为模态底部动作条可能会远离用户点击或触摸到的地方...左:网格底部动作条    右:长列表底部动作条 ---- 行为 1、底部动作条可以通过向下滑动底部动作条来关闭; 2、通过点击一个明显的控制按钮,例如在app导航中的“X”,或者触摸Android系统的后退按钮

    1.9K71

    一个Mac系统,能让程序员编程效率提升30%

    点击:加入 全屏工作环境 Macbook屏幕都比较小,再除去顶部状态,和底部dock,所剩下的展示区域就非常少了,可视区域变小必然会导致更频繁的窗口滚动操作。...我个人习惯把状态,dock都自动隐藏,这样可以需要长时间高注意力工作产生更高的效率,比如写代码可以xcode里看到更多的代码,比如编辑文字的时候不用频繁的上下滚动。...将应用全屏最大的好处在于避免注意力被其他的信息分散掉。当然全屏之后要切换出当前的工作环境就需要其他工具的辅助。 应用切换神器Snap 上面提到dock一般被我隐藏,但dock上有我最常用的app。...被忽视的触摸板 不少人都会觉得macbook的触摸板非常灵敏好用,单指轻触就可以完成鼠标的单击效果,双指轻触右半部分显示菜单,双指上下滑动可以完成页面的上下滚动,双指从右侧滑动呼出通知中心,四指朝外扩散可以显示桌面...后来开始使用Chrome,Chrome速度上完胜Firefox,浏览体验非常棒,稳定性也比Firefox好些。做一些简单的web页面调试的时候也很方便。现阶段使用频次也比较高。

    2.2K20

    手势魅力-设置一个触摸菜单

    (touchstart,touchmove,touchend),触摸属性,以及实现侧边动画,处理移动端点击,拖动,滑动,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js...在这种情况下在那里是: touchstart:当你触摸DOM元素触发 touchmove:当你沿着DOM元素拖动手指触发 touchend:当你从DOM元素中移除手指触发 在这些事件中,我将使用触摸属性...触摸属性列出当前屏幕上的所有手指: PageX:返回手指放置DOM中的x坐标。从左边开始计算,如果适用,则考虑水平滚动 PageY:返回手指放置DOM中的y坐标。...这绝对不是你想要用你的手机触摸手势发生的事情,所以考虑一下:当你打开/关闭菜单,你是否有兴趣阅读滚动隐藏的内容?如果你的拖拽方向是水平的,你就不能滚动 ? 我们需要一些边界在这里!...当菜单打开,它可以关闭或保持打开状态 - 与动画一起 - 返回之前的位置 如果它关闭了,那么它可以打开或者保持关闭状态,也可以动画返回之前 if ((translateX < (-menuWidth

    1.8K40

    把笔记本触摸板用起来

    大部分的笔记本用户对于触摸板都是当作没有鼠标的一个替代品,但是现在的windows触摸板內置了不少的快捷功能,比自己去鼠标找然后点击效率会高一点,如果没有外接键盘,双手随便可以触碰的到的话,使用触摸板会把体验提升一个档次...单指单,双击和滑动 这是我们使用最多的一个情景了,平时用来移动鼠标,选中,打开文件 双指操作 双指操作可以模拟鼠标的滚轮 双指左右,上下移动 当页面存在滚动条或者打开了图片查看器,可以触发滚动屏幕或者查看下一张图片...双指点击 : 模拟鼠标右键 双指收缩放大 模拟缩放和放大的情景,可以浏览器中,触摸板双指缩放和放大,可以使页面进行缩放和放大 三指操作 三指点击: 呼出windows自带的搜索菜单...三指下滑: 最小化当前窗口(如果有打开窗口)并显示桌面 三指上划: 打开任务桌面,可以新建一个虚拟桌面(同ctrl + win + D),ctrl + win + >||<,即是左右箭头,作用可以虚拟桌面中来回切换...窗口操作 全屏或缩放窗口 : 双击窗口标题 拖动窗口 : 双击窗口,第二次双击后不要松开,移动手指即可拖动窗口 Win快捷键使用 WIN : 显示/隐藏菜单 WIN + D : 显示桌面

    1.7K42

    Material Design — 菜单(Menus)

    每个菜单项都包含不关联的选项或操作,可影响app,页面或视图中已选定的元素。 菜单不应该被用作app内导航的主要方法。 ?...菜单通常使用单个单词作为标签,如“文件”,“格式”和“编辑”。其他上下文可能需要更长的标签。 禁用菜单选项 菜单显示一组一致的菜单项。...例如,当使网页上的文本高亮,Android仅显示“复制”菜单项,因为用户无法“剪切”或“粘贴”文本。 ? 情景菜单 菜单是可滚动的 如果菜单高度阻止其显示所有菜单项目,菜单可以在内部滚动。...取消选择 触摸菜单外部或按下系统“后退”按钮,取消操作并关闭菜单。 ? 简单菜单 ·打开,简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。 当前选择的菜单项突出显示(如下图)。 ?...·如果简单菜单中的文本长到需要换行,就改为使用Simple Dialogs,因为可以有不同高度的行(如下图)。 ? ·内容可滚动,菜单一直显示滚动条。

    5.8K100

    从零开始的Android:常见的UI设计模式

    本教程中,您将学习其中的一些模式,以及它们如何通过使用应用程序时创造出色的体验来帮助用户。 1.主画面 用户在打开应用程序时看到的第一个屏幕通常是最重要的。...在此模式中,您将采用列表和详细信息模式,并在同一屏幕上多次使用它。 区别在于列表项可以水平滚动而不是垂直滚动。...工具列 您可能已经注意到,Android应用程序中的大多数页面屏幕顶部都包含一个工具。...电视应用程序不仅需要考虑这两点,而且电视还使用D-pad控制器而不是触摸屏进行交互。 因此,轮播方式效果很好。 用户可以几行项目之间移动,然后水平滚动以查看他们可用的内容。...继续使用和学习Android,您将获得必要的经验,以了解特定情况下什么是有效的,什么是无效的。

    2.7K20
    领券