【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道编程题,博主会尽可能详细地进行讲解,令初学者也能听的清晰。每日一练系列会持续更新,暑假时三天之内必有一更,到了开学之后,将看学业情…

解决Springboot+VUE项目部署出现的跨域问题

自己写了一个项目,写好了,发现不会部署,然后到处查资料,最终终于部署好自己写的系统,系统为前后端分离项目。需要分别部署在同一个服务器docker中,配置不同得端口隐射,部署得过程中主要是跨域问…

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

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

Oracle锁的学习

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

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

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

docker-compose搭建redis服务

docker-compose搭建redis服务 1.首先准备所需文件 mkdir data touch redis.conf touch docker-compose.yaml # 这个结构 [rootiZbp16ukkrjo2m3jyyo3tfZ redis]# ls data docker-compose.yaml redis.conf2.编辑redis.conf bind 0.0.0.0 port 6379 # tcp-backlog 511 timeou…

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:…

bitbucket ssh登录提示 port 22: Operation timed out

bitbucket ssh登录失败 执行命令 ssh -T -vvv gitbitbucket.org结果提示&#xff1a; ssh: connect to host bitbucket.org port 22: Operation timed out原因&#xff1a;使用了22端口其实并不稳定。配置的其实如果连接到443端口更稳定。修改 ~/.ssh/config &#xff0c;增…

Alchemy Catalyst 2023 crack

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

【980. 不同路径 III】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 在二维网格 grid 上&#xff0c;有 4 种类型的方格&#xff1a; 1 表示起始方格。且只有一个起始方格。2 表示结束方格&#xff0c;且只有一个结束方格。0 表示我们可以走过的空方格。-1 表示我们无…

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 配置文…

在VUE中使用websocket

websocket概念 1、WebSocket是HTML5下一种新的协议&#xff0c;在单个TCP连接上进行全双工通信&#xff1b; 2、Websocket是一个持久化的协议&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直接可以创建持久性的连接&#xff0c;并进行双向数据传输&…

传球游戏

题目描述 上体育课的时候&#xff0c;小蛮的老师经常带着同学们一起做游戏。这次&#xff0c;老师带着同学们一起做传球游戏。 游戏规则是这样的&#xff1a;n个同学站成一个圆圈&#xff0c;其中的一个同学手里拿着一个球&#xff0c;当老师吹哨子时开始传球&#xff0c;每个…

链表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;促…