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

为什么移动导航栏不能滚动

移动导航栏不能滚动的原因有几个:

  1. 用户体验:滚动导航栏可能会给用户带来困惑和不便。移动设备屏幕相对较小,如果导航栏可以滚动,用户可能会在滑动页面时意外触发导航栏的滚动,导致页面跳转或其他操作不符合用户意图。固定导航栏可以确保用户始终能够方便地访问导航链接。
  2. 可操作性:导航栏通常是用户在移动应用或网页中最频繁使用的元素之一。如果导航栏可以滚动,用户在浏览网页内容时可能需要不断滚动导航栏才能找到所需的链接,这会增加操作复杂性和时间消耗。固定导航栏可以让用户快速定位和访问导航链接,提高可操作性和效率。
  3. 设计一致性:在移动应用或网页设计中,固定导航栏已成为一种常见的设计模式。大多数用户已经习惯了这种设计,并期望在移动设备上看到固定的导航栏。通过保持设计一致性,可以提高用户对应用或网页的熟悉度和可用性。

综上所述,移动导航栏不能滚动是出于用户体验、可操作性和设计一致性的考虑。固定导航栏可以提供更好的用户体验,使用户能够方便地访问导航链接,并符合用户对移动应用和网页的预期。

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

相关·内容

  • 导航滚动吸顶并自动高亮和点击跳转锚点

    2021-01-16 07:37:33 在阿里云的云市场页面上有一个效果,就是api导航滚动滚动到其所在位置时,自动吸顶,当滚动到下方所在导航指定的介绍时,自动高亮其导航。...实现方法 正常情况下我们点击自动定位到其所在位置一般用id锚点的方式,但是这种方式有一个缺陷就是无法实现滚动条缓动效果,而且带url上还会通过hash的方式显示出ID,另外也无法实现滚动到内容所在位置自动高亮导航...那么需要我们自己手动来实现以下,具体实现思路就是增加滚动条监听事件,当滚动导航指定内容区域时,给其导航增加高亮样式,点击导航时,计算好滚动条的滚动距离,让其滚动过去即可。...这样我们就实现了通过滚动条来控制导航高亮的效果了,接下了我们要实现的便是点击导航自动定位到其所在内容。...,并超过导航栏位置自动吸顶效果,同时点击导航滚动条缓动至锚点位置,实现的最终效果可以看阿里云市场详情页中的效果,比他显示的效果多了滚动条缓动效果。

    10.5K50

    侧边导航(移动端商品--评论--详情)随楼层滑动高亮显示

    TOP值,点击导航页面对应楼层滑动到窗口的某位置的TOP值'的函数 function getItem(_list,newOptions){ _list.each(function() {...body.find(this).offset().top + newOptions.scrollTop; data.push(item); }); } # 3.建立'滚动监听函数...,同时激活侧边导航高亮显示'的函数 function scrollActive(_list,newOptions){ var nowScrollTop = $(window).scrollTop()...list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass); } }); } # 4.建立'点击激活侧边导航高亮显示...newOptions); }); } })(window); # 7.总结 该插件参考了会找人web端首页动画的js,就是先将所有楼层查找出来,然后将其需要的各个参数放入一个对象,滚动的监听的时候对该数组循环比对的思路

    2.7K20

    移动端也能兼容的web页面制作2:导航、背景图片设置

    [ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性。...先给大家看下演示 demo 的运行,后面将围绕项目的制作过程,依次来展示导航、图片轮播图、表格、数据库交互等各方面的详细实现过程。...MDBootstrap 导航、背景图片设置 效果图 第一章:背景图片设置 ① 放置图片 ② 引入图片 ③ 图片蒙层 第二章:导航设置 ① 基础导航添加 ② 下拉菜单 ③ 菜单跳转 第三章:其它 ①...第二章:导航设置 ① 基础导航添加 因为导航一直要存在页面中,所以我设置了将导航添加到 App.vue 里,和 并列在其上面,后面主要内容都会在导航的下面进行切换...搜索" label navInput waves waves-fixed /> 这个是导航的效果

    1.4K20

    Material Design — 底部导航(Bottom Navigation)

    点击底部导航的图标可以:1、直接将你带到相关页面;2、刷新当前页面。 底部导航主要用于移动端,为了在pc端实现类似效果,可以使用侧边导航。...超过6个不要在底部导航用可滚动的内容形式 ?...底部导航可以从一个主题中的n级页面移动到另一个主题的一级页面。当用户去往下级页面时要保持底部导航可用,可通过持续展示,或者通过滚动隐藏和显示。...底部导航icon 点击底部导航icon将直接带你到相关页面,或刷新当前页面。每个icon必须指向目的地,并且不能打开菜单或对话框。...滚动 底部导航滚动时可以动态地出现和消失: ·向下滚动隐藏底部导航 ·向上滚动显示 手势 在内容区域上使用左右滑动手势不会在一级页面之间切换。

    4.1K90

    Bootstrap实战 - 单页面网站

    二、知识点 2.1 滚动监听 滚动监听使用了 Bootstrap 的 JavaScript 插件,根据滚动条所处的位置自动更新选中导航。...滚动监听一般与导航配合使用,这里先引用了带有二级导航导航。...并且给导航添加样式 navbar-fixed-top 使其固定在顶部不随滚动移动移动,但这样的话会遮住 body 上面的一部分内容,所以同时给 body 添加样式 padding-top: 60px...scrollspy(这里可以是任意值,只是做个示例)载体在其容器的滚动条变化时,随着载体的内容在视觉中的变化,其 id 对应的导航做出相应的反应。...这时移到最顶部时不能合理定位到第一个导航部分,因为上面给了 body 元素一个 60px 的内边距,这里给 body 元素增加一个属性 data-offset="60",使滚动监听在计算滚动位置是相对于顶部有一个偏移量

    8.9K104

    UI Tabbar底部标签设计全攻略

    底部标签(也称为导航)是移动设计中最流行的导航类型之一。它位于易于触及的区域,使用户的拇指可以轻松访问。尽管它相对简单,但要正确设计可能会很棘手。...标签导航剖析 底部标签可以是纯图标导航: 或图标可以与文本标签的组合: 所选导航选项通常具有不同的视觉风格,可以帮助用户一目了然地了解当前位置。...您可以评估导航选项,如果您仍然有五个以上的目的地,您可以使用像汉堡菜单这样的控件。 3. 不要设计可滚动的标签滚动的标签会损害可发现性。...由于一次并非所有导航选项都可见,因此用户可能很容易错过重要选项。另外,当用户滚动标签时,当前位置可能会消失。 ❌ 可滚动的标签 4....这就是为什么要尽量避免在选项之间使用花哨的转换。

    1.9K30

    移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    一、多排按钮导航样式及核心要点 1、实现效果 要实现下面的导航效果 ; 2、总体布局设计 该导航可使用 10 个 标签盒子 进行制作 ; 该导航的宽度自动充满整个屏幕 , 宽度为...设置自适应即可 ; 具体控制每行显示多少个元素 , 需要进行精确的计算 , 每行有 5 个元素 , 每个元素占宽度的 20% , 这个计算必须精准到 1 像素 , 如果不精确 , 宁可少 1 像素 , 也不能多...span> 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置在图片下方 ; 文本 span 样式为 : nav a span { /* 导航中的文本...width: 33.33%; } .brand div img { /* 设置图片链接中的图片 在水平方向上充满父容器即可 */ width: 100%; } /* 多排按钮导航...图片宽度为 40 像素 高度自适应 */ width: 40px; /* 上下 10 像素外边距 */ margin: 10px 0; } nav a span { /* 导航中的文本

    3.3K40

    【译】W3C WAI-ARIA最佳实践 -- 布局

    如果焦点位于列中的顶部单元格上,则焦点不会移动。 Page Down: 以开发者设定的行数移动焦点,一般滚动时,当前可见行集合中的最后一行会变为第一次滚动后可见行中的一行。...Page Up: 移动焦点到开发者设定的行数,一般滚动时,当前可见行集合中的第一行会变为滚动后可见行中的一行。 Home: 将焦点移动到包含焦点所在行的第一个单元格。...当使用导航键在单元格间移动焦点,例如光标键,它们不能用于某些操作,例如操作组合框或在单元格内移动编辑光标。...Page Down (可选地): 以开发者设定的行数向上移动焦点,一般情况下,当前可见行中的第一行会成为滚动后可见行中的一行。...在单元格内编辑和导航 当使用导航键在单元格间移动焦点,它们不能用来执行像操作组合框或在单元格内移动光标的操作。用户可能需要用于网格导航的键来操作单元格内的元素,如果单元格包含: 可编辑内容。

    6.1K50

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

    您可以设计您的侧边以显示可滚动导航项目列表。...在本节中,我们将按照以下步骤创建一个可滚动的侧边导航:a)创建带有导航项目的导航b)将导航样式设置为侧边c)将侧边栏位置设置为固定d)使用滚动条管理项目的溢出a)....创建带有导航项目的导航为了创建导航,我们将使用HTML nav元素。...将导航样式设置为侧边。创建水平导航后,我们可以在设置垂直滚动条之前将其样式设置为垂直侧边。...在本节中,我们将专注于防止侧边滚动主要内容时移动。我们希望将侧边样式设置为固定位置,以便主体可以自行滚动而不带上侧边

    1.6K00

    移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航 | 固定定位下面的布局设置 | 设置横向导航弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

    一、横向导航实现核心要点 需求 : 实现如下布局 ; 上一篇博客中 , 已经实现了顶部的搜索 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置 在上一篇博客中实现的搜索 , 使用...固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索 ; 搜索下方的 Banner 轮播图 , 如果以 标准流 显示 , 会被 搜索 覆盖 , 此处为 Banner 轮播图设置一个上外边距...下面的横向导航 , 高度为 64 像素 , 同时该父容器是一个圆角矩形 , 圆角半径为 8 像素 ; 该导航 上下各有 3 像素的外边距 , 左右各有 4 像素的外边距 ; 导航整体背景为白色..., 这样 5 个子项目平均分配整个宽度尺寸 ; 样式代码 : /* 横向导航样式 */ .local-nav { /* 横向导航的父容器布局 */ /* 设置为 Flex 弹性布局...: 44px; } .banner img { /* 设置图片自适应 */ width: 100%; } /* 横向导航样式 */ .local-nav { /* 横向导航的父容器布局

    53720

    Z-blogPHP《小清新》至简至美个人博客主题模板,自适应加SEO优化

    ,其他均是新样式新风格,奥,对了,评论也是之前的,我认为一个好的方案在没有更完美的前提下,为什么不继续使用呢,你说呢?...- 优化移动导航样式。 - 优化搜索页无结果时友好提示。 - 兼容和适配“链接模块管理”插件,优化对应导航高亮代码。 - 优化移动端展示样式。...V、优化导航之间的间距。 V、优化搜索结果,在没有内容的情况下,友好提示! 2020/05/18 V、优化顶部背景图视觉差特效。 V、优化自适应显示效果。 V、优化导航高亮显示效果。...2020/05/03 V、优化侧留言头像间距。 2020/04/22 V、新增滚动条顶部显示位置百分比。 V、优化移动端自适应显示效果。...广告设置:简单说下头部接口和脚本底部接口,如图:如果是百度或者谷歌联盟,把公共js放在头部接口就行,其他代码可以放在脚本底部,注意这俩是接口,不是广告位,不能直接投放广告。

    3.3K20

    前端成神之路-CSS高级技巧

    CSS高级技巧 目标 理解 能说出元素显示隐藏最常见的写法 能说出精灵图产生的目的 能说出去除图片底侧空白缝隙的方法 应用 能写出最常见的鼠标样式 能使用精灵图技术 能用滑动门做导航案例...属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll 不管超出内容否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条...更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等。 防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办? ?...最常见于各种导航的滑动门。 http://weixin.qq.com/ 核心技术 核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航

    6.8K30

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

    固定定位属性可以将元素固定在浏览器窗口的特定位置,不随页面滚动而变动,常用于创建固定导航、页脚等。文章通过一个示例演示了如何实现固定定位的导航,并提到了使用固定定位属性时需要注意的几点问题。...固定在页面顶部的导航示例 下面我们以一个固定在页面顶部的导航为示例,演示如何使用固定定位属性。...然后,我们还为导航设置了一些样式,如背景色、文字颜色和内边距。 为了避免导航遮挡其他内容,我们给 .content 添加了 margin-top 的样式。...这样, .content 就会在导航下方出现,避免了页面内容被导航遮挡的问题。 通过上述代码,我们实现了一个固定在页面顶部的导航。...在移动设备上,固定定位属性可能有性能问题,并且在页面滚动过程中有时会出现闪烁的情况。所以,在移动设备上使用固定定位要慎重考虑。

    39710
    领券