最近在写移动端,有一个需求是滚动时使tab吸顶,如图

开始的思路是监听最外层元素,外层元素的scrollTop >= tab的offsetTop 就设置一个flag为true,flag为true时给list添加高度和overflow-y: scroll;

发现这样写tab滚到最上面的时候就滚不下来了。

所以尝试另外一种方法,给tab加上position:sticky; top: 0;  结果这样写会导致在ios上滚动不流畅,百度之后说可以使用-webkit-overflow-scrolling: touch;

加了这个属性之后  在滚动时候tab会消失,position:sticky失效。滚动停止之后才会生效。

不得已,只能想别的办法,网上找了个三方库(better-scroll),但是因为在transform内position:fixed会不生效。所以找了个折中的方法。

在使用better-scroll的元素的同级放一个用来占位的tab, 因为是往下滚动,所判断条件是<= -应用高度时占位元素显示,否则占位元素消失。ios滚动时吸顶就此解决。

使用better-scroll时,需要注意的是一定要先执行refresh() 和外层元素设置高度后,内层元素不要设置高度,靠内容撑开,否则无法滚动

ios中吸顶需求引起的一系列问题的更多相关文章

  1. IOS中position:fixed吸底时的滑动出现抖动的解决方案

    H5方法: //吸顶头部 .header{ width:100%; height:50px; position:fixed; top:0px; } //main滑动区域 .main{ width:10 ...

  2. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  3. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  4. 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一

    如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的 ...

  5. UWP中使用Composition API实现吸顶(2)

    在上一篇中我们讨论了不涉及Pivot的吸顶操作,但是一般来说,吸顶的部分都是Pivot的Header,所以在此我们将讨论关于Pivot多个Item关联同一个Header的情况. 老样子,先做一个简单的 ...

  6. UWP中使用Composition API实现吸顶(1)

    前几天需要在UWP中实现吸顶,就在网上找了一些文章: 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一 在UWP中页面滑动导航栏置顶 发现前人的实现方式大多是控制ListViewBase的Heade ...

  7. 移动端吸顶(iOS与安卓)

    有的时候经常会遇到移动端吸顶效果,开始我也只是上网查了一下,分别有iOS和android两种样式,如下: /*!*Android*!*/ .head { position: fixed; top: 0 ...

  8. 类似吸顶功能解决ios不能实时监听onscroll的触发问题

    问题:近期项目需要一个类似西东功能,当页面向上滚动160px后div固定在顶部 解决方法:首先,想到的是window.onscroll方法 .fixed{position:fixed;-webkit- ...

  9. [RN] React Native 中使用 stickyHeaderIndices 实现 ScrollView 的吸顶效果

    React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果. 例如下面代码中: <ScrollView showsVert ...

  10. Vue开发——实现吸顶效果

    因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的. 进入正题,先看下效果图: 其实js做这个效果还 ...

随机推荐

  1. 安防摄像头云端录像计划快捷配置-LiveNVR Onvif/RTSP流媒体服务

    LiveNVR Onvif/RTSP流媒体服务,支持RTSP稳定拉流接入,支持Onvif协议接入,支持RTMP/HLS/HTTP-FLV分发,将传统安防监控设备互联化,无插件直播等. 录像计划 什么是 ...

  2. 大众 CEO 奥博穆:比亚迪推动行业进步 良性竞争惠及消费者

    在近期的一次记者采访中,大众集团全球CEO奥博穆谈起比亚迪,说"有比亚迪这样的竞争对手,对我们有正向作用!". 记者单刀直入:"比亚迪是大众在中国最大的对手吗?" ...

  3. Visual Studio 2026 预览体验版现已发布,一起来看看带来哪些新功能!

    前言 2025 年 9 月 9 日微软 Visual Studio 团队正式推出了 Visual Studio 2026 预览体验版(Visual Studio 2026 Insiders),此次发布 ...

  4. 直播插件-vue-video-player

    前言:在H5页面实现观看直播+视频回放:在开发期间使用过video.js.mui-player等插件,发现这些video插件对移动端的兼容性都不友好,最后发现一个在移动端兼容不错的插件-- vue-v ...

  5. Node.js安装和环境配置,pnpm安装和项目依赖安装

    Vue和React项目都需要Node.js环境.使用 Vite 或 create-vue 创建 Vue 3 项目时,默认采用 pnpm 管理依赖. ‌React 项目也可采用 pnpm 管理依赖. 这 ...

  6. ChCore-lab4

    lab 4: 多核调度与IPC 目录 lab 4: 多核调度与IPC 多核支持 多核调度 调度队列初始化 调度队列入队 调度队列出队 协作式调度 抢占式调度 物理时钟中断和抢占 进程间通信IPC 一時 ...

  7. 9. Spring AI 当中对应 MCP 的操作

    9. Spring AI 当中对应 MCP 的操作 @ 目录 9. Spring AI 当中对应 MCP 的操作 MCP 问题: 使用 MCP STDIO 输出配置实操 MCP Server 现成共用 ...

  8. 你必须知道的TCP和UDP核心区别,快速搞懂这两大协议!

    1. TCP (Transmission Control Protocol) 概念 TCP(传输控制协议)是一种面向连接的.可靠的传输协议.它负责将数据从源主机传输到目标主机,并确保数据的完整性.顺序 ...

  9. ORA-07445: exception encountered: core dump [kdxlin()+4088]处理---惜分飞

    联系:手机/微信(+86 17813235971) QQ(107644445) 标题:ORA-07445: exception encountered: core dump [kdxlin()+408 ...

  10. java记录程序执行时间之StopWatch

    在日常写代码的过程中,通常会记录某一段程序的运行时间,使用的方式是System.currentTimeMillis(). Spring也自带了一种方式StopWatch,使用起来也比较简单. 共分为四 ...