【CSS】ios上fixed固定定位的input输入框兼容问题

news2024/11/15 17:44:40

需求 :

实现一个简单的需求,上方是搜索框并且固定顶部,下方是滚动的内容list
在这里插入图片描述

问题 :

若如图上方使用固定定位, 下方用scroll-view, 在安卓上是没有问题的, 但是发现ios上会出现兼容问题 :

问题1: 当content list滚动到中间时再去搜索, 展现出来的搜索内容会顶到顶部上去, 而不是在搜索框下面, 并且再次点击搜索框无反应

原因 : 因为此时content list已滚动到中间, 而完成搜索后, content list的位置从原来滚动的位置开始计算, 因此搜索出来的内容展现出来不是在搜索框下面

问题2: 当content list滚动到最底部时再去搜索, 页面出现空白(实际有数据返回), 并且再次点击搜索框及其他元素无反应

原因不详~

解决方案 :

使用js计算出来中间高度 contentHeight = pageHeight - searchHeight
sroll content 给到scroll-y : auto

完美解决~
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/823298.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CEC2022:CEC2022测试函数及多种智能优化算法求解CEC2022对比

目录 一、CEC2022测试函数 二、多种智能优化算法求解CEC2022 2.1 本文参与求解CEC2022的智能优化算法 2.2 部分测试函数运行结果与收敛曲线 三、带标记收敛曲线代码(获得代码后可自行更改) 一、CEC2022测试函数 CEC2022测试集共有12个单目标测试函数&#x…

实战 01|「编写互动式界面」

前言 实践是最好的学习方式,技术也如此。 文章目录 前言一、功能需求(一)1、功能需求描述2、知识点3、布局与程序设计 二、功能需求(二)1、功能需求描述2、知识点1)LinearLayout2)RelativeLayou…

联想存储 HH0305_DE4000H 划分卷组、卷、主机

创建卷组 可使用卷组来创建可供主机访问的一个或多个卷。卷组是具有共同特性(如 RAID 级别和容量)的卷的容器。 关于本任务 如果拥有容量较大的驱动器且可以在控制器之间分发卷,则为每个卷组创建多个卷可以很好地利用存储容量和保护数据。…

界面控件DevExpress BI Dashboard v23.1——支持全新的图标趋势指标

DevExpress BI Dashboard v23.1支持在Dashboard图表项中使用趋势指标,趋势指标有助于传达一段时间内的数据趋势——允许用户发现模式并更有效地分析复杂的数据集。 使用DevExpress Analytics Dashboard,再选择合适的UI元素(图表、数据透视表…

Android性能优化—卡顿分析与布局优化

一、什么是卡顿?或者说我们怎么感知APP卡顿? 这里面涉及到android UI渲染机制,我们先了解一下android UI是怎么渲染的,android的View到底是如何一步一步显示到屏幕上的? android系统渲染页面流程: 1&…

MicroPython ESP32网页实时更新DHT11数据显示

MicroPython ESP32网页实时更新DHT11数据显示 📌相关篇《MicroPython ESP32 读取DHT11温湿度传感器数据》📍《【Micropython esp32/8266】网页点灯控制示例》 ✨本例综合以上两篇文章内容实现:在本地网页中显示DHT11温度传感器数据。可以做到…

学习系统编程No.34【线程同步之信号量】

引言: 北京时间:2023/7/29/16:34,一切尽在不言中,前几天追了几部电视剧,看了几部电影,刷了n个视屏,在前天我们才终于从这快乐的日子里恢复过来,然后看了两节课,也就是上…

【雕爷学编程】MicroPython动手做(27)——物联网之掌控板小程序

知识点:什么是掌控板? 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片,支持WiFi和蓝牙双模通信,可作为物联网节点,实现物联网应用。同时掌控板上集成了OLED…

C++设计模式之过滤器设计模式

C过滤器设计模式 什么是过滤器设计模式 过滤器设计模式是一种行为型设计模式,它允许你在特定的条件下对输入或输出进行过滤,以便实现不同的功能。 该模式有什么优缺点 优点 可扩展性:过滤器设计模式允许您轻松地添加、删除或替换过滤器&a…

【PHP代码审计】ctfshow web入门 php特性 93-104

ctfshow web入门 php特性 93-104 web 93web 94web 95web 96web 97web 98web 99web 100web 101web 102web 103web 104 web 93 这段PHP代码是一个简单的源码审计例子,让我们逐步分析它: include("flag.php");: 这行代码将flag.php文件包含进来。…

【图论】强连通分量

一.定义 强连通分量(Strongly Connected Components,简称SCC)是图论中的一个概念,用于描述有向图中的一组顶点,其中任意两个顶点之间都存在一条有向路径。换句话说,对于图中的任意两个顶点u和v,…

windows编译ncnn

官方代码https://github.com/Tencent/ncnn/wiki/how-to-build#build-for-windows-x64-using-visual-studio-community-2017 编译工具 visual studio 2017 一、编译protobuf 1、下载protobuf protobuf-3.11.2:https://github.com/google/protobuf/archive/v3.11…

部署monggodb副本集详细文档

部署monggodb副本集 MongoDB有多种高可用性架构可以选择,以下是其中几种常见的高可用性架构: 副本集(Replica Set):副本集是MongoDB中最基本的高可用性架构。它由多个节点组成,其中有一个主节点&#xff0…

指针初阶(超详解)

指针初阶 1.指针是什么2.指针和指针类型2.1 指针-整数2.2 指针的解引用 3.野指针3.1 野指针成因3.2如何避免野指针 4.指针运算4.1 指针-整数4.2 指针-指针4.3 指针的关系运算 5.指针和数组6.二级指针7.指针数组 1.指针是什么 指针是什么? 指针理解的2个要点&#xf…

express学习笔记5 - 自定义路由异常处理中间件

修改router/index.js,添加异常处理中间件 *** 自定义路由异常处理中间件* 注意两点:* 第一,方法的参数不能减少* 第二,方法的必须放在路由最后*/ router.use((err, req, res, next) > {console.log(err);const msg (err &…

如何制作VR全景地图,VR全景地图可以用在哪些领域?

引言: 随着科技的迅速进步,虚拟现实(VR)技术正逐渐渗透到各个领域。VR全景地图作为其中的重要应用之一,为人们提供了身临其境的全新体验。 一.什么是VR全景地图? VR全景地图是一种利用虚拟现实技术&…

RTC晶振两端要不要挂电容

发现GD32的RTC晶振两端需要挂电容,STM32的RTC晶振两端不需要挂电容。 STM32的RTC晶振两端,不需要挂电容,这样晶振启振很容易,挂大了,却难启动,且温度越低,启动越难。 有人说负载电容为6pF的晶振…

(一)初识streamlit——安装以及初步应用

1 前言 最近我开发了一款基于Streamlit的舌体分割演示应用,并将其发布在Streamlit Cloud上。现在,任何人都可以通过访问应用的链接,轻松体验这个舌体分割项目。 相关链接:舌体分割的初步展示应用——依托Streamlit搭建demo 基于此…

2023年第四届“华数杯”数学建模思路 - 案例:退火算法

## 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 退火算法原理 1.1 物理背景 在热力学上,退火(annealing)现象指物体逐渐降温的物理现象,温度愈低&#…

【Nginx13】Nginx学习:HTTP核心模块(十)Types、AIO及其它配置

Nginx学习:HTTP核心模块(十)Types、AIO及其它配置 今天学习的内容也比较简单,主要的是 Types 相关的配置,另外还会了解一下 AIO 以及部分没有特别大的分类归属的配置指令的使用。后面的内容都是 HTTP 核心模块中比较小…