文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

position:sticky的兼容性尝试

问题 目前前端的h5有个需求，就是“当页面上的若干个标题被拖动到视口的顶部时，则显示一个被定位到视口的顶部的tab标签，可对这个tab标签进行点击导航，并在某个特殊的情况下隐藏”。...最简单粗暴的做法就是针对document.body做scroll侦听，在函数中遍历所有的标题并计算出getBoundingClientRect计算出距离适口的顶部距离，决定是否显示tab栏或者活动标签，...getBoundingClientRect函数，都会导致ui线程刷新渲染队列，进行一次layout和repaint，有可能造成卡顿 + 在ios设备中，scroll事件在上下滑动的过程中js不会连续执行...，只在滑动结束的时刻执行一次，并且不支持左右滑动事件的触发 针对上述问题进行修复，其实并不困难： + 针对scroll做throttle节流，避免每次滑动都执行，可以设置时间间隔，如50ms + 在侦听函数中计算元素的...sticky布局有着几个条件： + 元素并不会脱离文档流，当元素被粘在视口的顶部时，原来在文档流中的位置仍然占据，这点类似relative定位 + 元素相对于其最近可滚动的祖先元素“粘性定位”，如果其祖先元素都不能滚动

4.2K100

关于虚拟列表，看这一篇就够了

.虚拟列表 其核心思想就是在处理用户滚动时，只改变列表在可视区域的渲染部分，然后使用padding或者translate来让渲染的列表偏移到可视区域中，给用户平滑滚动的感觉。...虚拟列表原理 虚拟列表的核心步骤可以总结成五步： 不把长列表数据一次性全部直接渲染在页面上 截取长列表一部分数据用来填充可视区域 长列表数据不可视部分使用空白占位填充（下图中的startOffset和endOffset...，目前想到的办法有两个 是加一个过渡的loading， 隐藏滚动条，让用户只能滚轮滚动 不定高度 当列表项的高度不固定的时候，我们就需要一个策略来得到需要渲染的列表项，就是先给没有渲染出来的列表项设置一个预估高度...CompareResult.gt) {         end = tempIndex - 1;       }     }     return tempIndex;   }; 设置列表项偏移，使其展示在容器视口中...，我们还需要加上监听滚动条位置并且从接口拉取数据的逻辑，所以需要优化的地方还很多。

5.2K32
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CollapsingToolbarLayout使用

    CollapsingToolbarLayout 可以看到，Toolbar的标题放大并在下方显示，当我们向上滑动列表时，顶部Header部分的图片向上折叠隐藏，标题向上移动并缩小，同时以渐显式的方式显示蓝色主题...，直至高度缩为Toolbar的高度并成为Toolbar的背景色；向下滑动列表时，Header部分逐渐显示。...，如效果图中所示；contentScrim内容遮罩，上下滚动时图片上面显示和隐藏的遮罩色，Toolbar位置的的背景色；通常这样设置：app:contentScrim="?...；pin，固定别针效果，比如上图中的Toolbar；layout_collapseParallaxMultiplier不折叠视差系数，配合parallax模式使用，取值有点类似alpha（不透明度），在...当设置为1.0，滚动列表时图片不会折叠移动； 代码实现： 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为，可以参考上一篇文章，这里我介绍一下本例中几个新的注意点。

    3.2K60

    移动端避免使用100vh

    核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...在上图中，应隐藏在屏幕底部的按钮。更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。

    2.3K20

    移动端避免使用100vh

    核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...在上图中，应隐藏在屏幕底部的按钮。更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。

    2.5K20

    一文彻底搞懂js中的位置计算

    scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。...此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数。 scrollLeft/Top在日常工作中是比较频繁使用关于操作滚动条的相关api，他们是一个可以设置的值。...元素的 offsetLeft/offsetTop 的值等于它的左边框左侧/顶边框顶部到它的 offsetParent 元素左边框的距离。...计算元素是否出现在视口内 利用的还是元素距离视口的位置小于视口的大小。 注意即便变成了负值，那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。...(就比如滑动过) vue-lazy图片懒加载库源码就是这么判断的。

    5.1K10

    如何处理手势冲突 | 手势导航连载 (三)

    那么，如何解决这个问题呢？我们准备了一张流程图帮助大家快速做出决策: △ 请点击图片放大查看 注解: 非粘性沉浸模式: 用户可以通过在系统栏上滑动来退出沉浸模式。...粘性沉浸模式: 用户可以通过在系统栏上滑动来暂时退出沉浸模式 这里我们向您进一步解释一下流程图里的内容。 问题 1: 应用需要隐藏导航栏或状态栏吗？...您也许已经注意到，在流程图中多图显示控件 (ViewPager) 在此处回答 "否"。这是因为与整个视图的宽度相比，屏幕左右侧的手势交互区域宽度相对较小 (默认为每边 20dp)。...系统手势区域如下图所示: △ 从蓝色区域向屏幕中间滑动相当于 "返回" 按钮；从红色区域向上滑动则是返回主屏，注意红色区域即为系统强制手势交互区域 简单的解法 这个问题最简单的解决方案是，添加一些内/外边距...因此，除了直接修改视图的边距，我们还可以修改布局，以避免出现空间浪费: △ 将进度条移到视图的顶部 在这里，我们将进度条移到了播放控件的顶部，完全移出了手势交互区域。

    6.3K30

    【Android】手把手教你上滑解锁的效果

    接下来和大家聊聊如何实现这样的效果。...有效上滑 如上如，锁屏状态下，定义有效滑动阈值standardH，若上滑高度差超过standardH，则判断为有效滑动，布局滑动至屏幕顶部（不可见）；否则如向下滑动、向上滑动距离不够等，都作为无效滑动...Scroller类中有computeScroll方法，它能实现流畅滚动的原因是，它将初始位置和目标滑动位置之间的距离分成N份依次调用scrollTo方法，通过postInvalidate在每次调用scrollTo...阻尼滑动效果 从图中可以看到鼠标原来的位置在“更多精彩”图标的顶部，随着向上拖动，鼠标开始偏离图标顶部，就好像一根橡皮筋，拉得越开，需要用更大的力，阻尼滑动就给我们这样的感觉。...问题与改进 问题出现 基于上述的扩展，在RecyclerView的item里的控件添加点击事件后，发现推荐页无法按预期显示隐藏：无论滑动多短的距离甚至是向上滑动，只要是在屏幕下方滑动，推荐页总是会自己显示出来

    3.4K20

    Android项目实战（二十）：浅谈ListView悬浮头部展现效果

    先看下效果：需求是 滑动列表 ，其中一部分视图（粉丝数，关注数这一部分）在滑动到顶端的时候不消失，而是停留在整个界面头部。...我们先分析要解决的问题： 1、如何实现列表ListView顶部视图跟随ListView一起滑动 2、如何实现滑动过程中需要停留在顶部的视图 解决： 第一个问题，实现ListView与顶部视图一起滑动，ListView...提供一个方法，addHeadView(View);  意思就是在ListView顶部添加一个View。...首先我们这个停留在顶部的View（称为View1）是ListView.addHeadView()上去的，即滑动列表，这个View1会划出去，那么如何让它不划出去？...View1刚划出顶部的时机就是： 当滑动时 firstVisibleItem>=要悬浮的 item的position时 让View2显示 ，否则隐藏。

    1.7K50

    在移动端避免使用100vh「建议收藏」

    在移动端避免使用100vh CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!...100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免100vh，而是依赖javascript来设置高度，以获得完整的视口体验。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。...这些浏览器没有将100vh的高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为隐藏地址栏的浏览器高度。结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。...在上图中，应该在屏幕底部的按钮被隐藏了。更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部，因此用户体验是很糟糕的。

    3.2K21

    什么是移动端开发【重点学习系列—干货十足–一万字详解】

    从移动端开发的一些概念、专有名词、缩放、viewport移动端事件、适配问题以及一些工作中沟通经常会用到这些方面来说一下移动端 文章目录 引言 1-移动端开发相关概念 移动端特点 屏幕大小 注意：...在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源。...为当前在元素上同时滑动的触点对象数组。...targetTouches 为滑动时，当前元素上的触点对象数组 touches 为滑动时，当前屏幕上所有的触点对象数组 touchmove 事件 在 touchend 事件中 changedTouches...changedTouches 来获取 触点对象 每一个触点对象都包含一些位置信息，其中包括 clientX 相对可视区域左侧的偏移 clientY 相对可视区域顶侧的偏移 pageX 相对文档左侧的偏移 pageY 相对文档顶部的偏移

    3.4K21

    吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

    产生原因 为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？ 最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。...原来在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。...当手指从触摸屏上移开，滚动会立即停止 */ 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper {...内部元素超出 body 即产生滚动，超出的部分 body 隐藏。...很容易想象，在我需要touchmove滑动时候，优先触发了touchstart的点击事件，是不是已经产生了冲突呢？ 所以呢，在具有滚动的情况下，还是建议使用 click 处理。

    1.8K30

    吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

    产生原因 为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？ 最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。 ?...原来在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。...当手指从触摸屏上移开，滚动会立即停止 */ 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper {...内部元素超出 body 即产生滚动，超出的部分 body 隐藏。...很容易想象，在我需要touchmove滑动时候，优先触发了touchstart的点击事件，是不是已经产生了冲突呢？ 所以呢，在具有滚动的情况下，还是建议使用 click 处理。

    2.7K20

    【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

    产生原因 为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？ 最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。 ?...原来在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。...-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling...内部元素超出 body 即产生滚动，超出的部分 body 隐藏。...很容易想象，在我需要touchmove滑动时候，优先触发了touchstart的点击事件，是不是已经产生了冲突呢？ 所以呢，在具有滚动的情况下，还是建议使用 click 处理。

    1.9K22

    Flutter SingleChildScrollView 滚动控件

    头”还是“尾”，false在“头”，true在“尾” this.padding, //内边距 bool primary, //是否使用widget树中默认的`PrimaryScrollController...` this.physics, //决定可滚动组件如何响应用户操作，滑动到边界时，出现弹性（ios）还是微光（android） this.controller,//接受一个ScrollController...}) SingleChildScrollView常用属性值 含义 scrollDirection 滚动方向，默认是垂直方向 reverse 决定可滚动组件的初始滚动位置是在“头”还是“尾”，false在...，并且没有指定controller时，primary默认为true. physics 决定可滚动组件如何响应用户操作，滑动到边界时，出现弹性（ios）还是微光（android），ClampingScrollPhysics...为此，Flutter中提出一个Sliver（中文为”薄片“的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成好多个”薄片“（Sliver），只有当Sliver出现在视口中时才会去构建它

    6K00

    CSS 中 关于 Overflow ，你需要了解的这些知识点！

    注意，在图中，只有当内容比其容器长时，滚动条才可见。接下来，我们将讨论与overflow相关的longhand属性 Overflow-X 该家伙负责x轴或元素的水平边。...如下所示： .card { overflow: hidden; border-radius: 7px; } 动画 当涉及动画时，overflow: hidden的好处是：在剪辑时可以悬停显示的隐藏元素上...Overflow的常见问题：在手机上滚动 例如，当我们有一个滑动条时，仅仅添加overflow-x是不够的。在Chrome iOS上，我们需要手动滚动和移动内容。看下面的动图： ?...根据MDN： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。它有两个值： auto： 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...当使用像素值时，这将在视口宽度较小时引起问题。

    8K20

    使用 Compose 构建 Wear OS 应用

    在 Wear OS 中，主要的手势就是滑动，通过使用 SwipeToDismissBox 向右滑动，就相当于点击了 "返回" 按钮。...将它放置于 Scaffold 中是由于屏幕是弧形的，因此位置指示器需要位于表盘中央 (Scaffold)，而不仅仅是在视口 (viewport) 中央。否则，指示器可能会被截断。...Scaffold 设计 △ Scaffold 设计层级 在进行 Scaffold 的设计时，请参考上图中的层级顺序进行考虑，首先要做的是对 App 进行设置，其次是设置 MaterialTheme 来自定义一些应用的外观和风格...而在滚动时，可以通过检查滚动状态，通过隐藏时间显示来为屏幕留出更多的空间，还可以根据状态来关闭或打开 vignette 效果。...Navigation 在本文一开始就提到您需要使用 Wear Navigation 依赖项来替换 Navigation，这里再次强调一下，从技术层面来说您仍可使用 Navigation，但是可能会遇到各种问题

    96220
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券