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

需求 :

实现一个简单的需求,上方是搜索框并且固定顶部,下方是滚动的内容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.mzph.cn/news/23178.shtml

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

相关文章

c语言每日一练(1)

前言: 每日一练系列,每一期都包含5道选择题,2道编程题,博主会尽可能详细地进行讲解,令初学者也能听的清晰。每日一练系列会持续更新,暑假时三天之内必有一更,到了开学之后,将看学业情…

你值得拥有——流星雨下的告白(Python实现)

目录 1 前言 2 霍金说移民外太空 3 浪漫的流星雨展示 4 Python代码 1 前言 我们先给个小故事,提一下大家兴趣;然后我给出论据,得出结论。最后再浪漫的流星雨表白代码奉上,还有我自创的一首诗。开始啦: 2 霍金说…

Oracle锁的学习

Oracle数据库中的锁机制 数据库是一个多用户使用的共享资源。当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况。若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数据库的一致性。 在数据库中有两种基本的锁类…

spark history网络流量占用高问题记录

生产环境遇到一台机器网络流量占用高告警 由于监控只有机器总的网络流量,没有具体进程的 于是只能登陆服务器,安装nethogs:yum install nethogs 然后执行nethogs命令查看进程流量 观察到主要是spark history server这个进程占用流量高(最高…

puppeteer监听response并封装为express服务调用

const express require(express); const puppeteer require(puppeteer); const app express(); let browser; // 声明一个全局变量来存储浏览器实例app.get(/getInfo, async (req, res) > {try {const page_param req.query.page; // 获取名为"page"的查询参数…

openCV图像读取和显示

文章目录 一、imread二、namedWindow三、imshow #include <opencv2/opencv.hpp> #include <iostream>using namespace std; using namespace cv;int main(int argc,char** argv) {cv::Mat img imread("./sun.png"); //3通道 24位if (img.empty()) {std:…

Alchemy Catalyst 2023 crack

Alchemy Catalyst 2023 crack Alchemy CATALYST是一个可视化本地化环境&#xff0c;支持本地化工作流程的各个方面。它帮助组织加快本地化进程&#xff0c;比竞争对手更快地进入新市场&#xff0c;并为他们创造新的收入机会。 创建全球影响力 高质量的产品和服务翻译对跨国组织…

windows创建占用特定端口程序

默认情况下&#xff0c;远程桌面使用的是3389端口。如果您想将远程桌面端口更改为8005&#xff0c;以达到模拟程序占用端口8005的情况&#xff0c;可以执行以下操作&#xff1a; 如执行以下命令&#xff0c;则1&#xff0c;2&#xff0c;3步相同操作可以跳过&#xff0c;直接往…

二进制安装K8S(单Master集群架构)

目录 一&#xff1a;操作系统初始化配置 1、项目拓扑图 2、服务器 3、初始化操作 二&#xff1a; 部署 etcd 集群 1、etcd 介绍 2、准备签发证书环境 3、master01 节点上操作 &#xff08;1&#xff09;生成Etcd证书 &#xff08;2&#xff09;创建用于存放 etcd 配置文…

链表OJ题讲解2

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大家三连关注&#xff0c;一起学习&#xff0c;一起进步&#…

策略模式(C++)

定义 定义一系列算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可互相替换((变化)。该模式使得算法可独立手使用它的客户程序稳定)而变化(扩展&#xff0c;子类化)。 ——《设计模式》GoF 使用场景 在软件构建过程中&#xff0c;某些对象使用的算法可能多种多…

深入理解Streamlit中的按钮行为(四):示例与最佳实践

文章目录 1 前言&#x1f680;2 Streamlit中if st.button()的使用时机 &#x1f3af;&#x1f4a1;3 按钮的逻辑3.1 通过按钮显示临时消息的常用逻辑 &#x1f4e2;&#x1f4a1;3.2 状态保留按钮 &#x1fa84;&#x1f518;3.3 切换按钮 &#x1f504;&#x1f518;3.4 控制流…

Tensorrt 原生Activate 算子讲解

Tensorrt operators docs&#xff1a; Activation Apply an activation function on an input tensor A and produce an output tensor B with the same dimensions. import numpy as np from cuda import cudart import tensorrt as trt # 输入张量 NCHW nIn, cIn, hIn, wI…

Scrum敏捷开发流程图怎么画?

1. 什么是Scrum敏捷开发流程图&#xff1f; Scrum敏捷开发流程图是一种可视化工具&#xff0c;用于形象地描述Scrum敏捷开发方法中的工作流程和活动。Scrum敏捷开发流程图展示了项目从需求收集到产品交付的整个开发过程&#xff0c;帮助团队理解和跟踪项目进展&#xff0c;促…

02.Redis实现添加缓存功能

学习目标&#xff1a; 提示&#xff1a;学习如何利用Redis实现添加缓存功能 学习产出&#xff1a; 流程图 1. 准备pom环境 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId&g…

EXCEL,多条件查询数字/文本内容的4种方法

目录 1 问题&#xff1a;如何根据多条件查询到想要的内容 2 方法总结 2.1 方法1&#xff1a; sumif() 和sumifs() 适合查找符合条件的多个数值之和 2.2 方法2&#xff1a;使用lookup(1,0/((区域1条件1)*(区域2条件2)*....),结果查询区域) 2.3 方法3&#xff1a;使用 ind…

广西茶叶元宇宙 武隆以茶为媒 推动茶文旅产业融合发展

8月4日&#xff0c;重庆市武隆区启动为期3天的“武隆首届玩茶荟”。本次活动以“中国最美玩茶地——武隆”为主题&#xff0c;吸引众多国内知名专家、茶企和茶馆相关负责人&#xff0c;共同探索武隆茶文旅融合发展新路径和新业态。 广西茶叶元宇宙&#xff1a;广西茶叶元宇宙 …

React安装ant design组件库,并使用

ant design是一个很棒的组件库&#xff0c;官方地址&#xff1a;快速上手 - Ant Design 但是如何在React里面用起来&#xff0c;好像并不是很顺畅&#xff0c;没有像Vue里面那么友好&#xff0c;因为我踩过这个坑&#xff0c;虽然安装很简单&#xff0c;但是想要出样式&#x…

合并两个有序链表(leetcode)

题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]思路 每次递归都会比较当前两个节点的值&#xff0c;选择较小的节点作为合并后的链…

edge://settings/defaultbrowser default ie

Microsoft Edge 中的 Internet Explorer 模式 有些网站专为与 Internet Explorer 一起使用&#xff0c;它们具有 Microsoft Edge 等新式浏览器不支持的功能。 如果你需要查看其中的某个网站&#xff0c;可使用 Microsoft Edge 中的 Internet Explorer 模式。 大多数网站在新…