小程序scroll-view中使用fixed定位问题

最新推荐文章于 2024-07-20 18:27:30 发布
最新推荐文章于 2024-07-20 18:27:30 发布
阅读量4k 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/baozaobenren/article/details/106134668
探讨了在scroll-view中使用fixed定位时，iOS与安卓显示效果的差异。指出在iOS系统上，scroll-view中使用fixed定位可能导致元素显示不全的问题，并分享了解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

scroll-view中尽量少用fixed定位，安卓显示正常，ios只显示scroll-view的范围,logo的上半部分消失在这里插入图片描述
之后把用了fixed定位的logo没有放在scroll-view的下面，而是同级，安卓ios显示一切正常，尽量少使用fixed定位，fixed定位在ios系统上会有小问题

uniapps项目 scroll-into-view 开启动画后fixed乱跑 跟着容器滚动的问题
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
06-16 130
这个问题其实在 Web 开发中也经常遇到，而在uniapp项目中更容易踩雷，毕竟你看不到框架在背后加了什么样式，只有浏览器 / 小程序实际表现出问题你才会意识到。希望这篇文章能帮你避坑。如果你也踩过类似的坑，欢迎评论区分享你的处理方式！
微信小程序Scroll-view的一个心得
baidu_33548663的博客
07-20 1921
今天写小程序突然要用到Scroll_view看了网上好多的教程，然后自己写发现都不对，最后仔仔细细的看了一遍开发文档才知道那里错了。 当时是这样写的 <scroll-view scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true"> <view wx:for="{{adre...
【微信小程序】scroll-view与fixed不可混用
Minf的博客
02-08 1208
今天实现需求时，遇到一个bug： <scroll-view scroll-y="{{true}}"> <image src="xxx" style="position:fixed"/> <view wx:for="..." style="z-index:1"></view> </scroll-view> html结构如上。固定背景image，且实现上下滑动。 此时会发现有些区域无法上下滑动 解决方案： <scroll-view scro
微信小程序 - - - - - scrill-view内元素使用fixed无效问题
Dark_programmer的博客
10-20 3230
scroll-view fixed无效
ios机型小程序中scroll-view与其内元素fixed定位问题思考，你认为下面哪种方式更合理？
qq_45290368的博客
03-07 608
ios机型小程序中scroll-view与其内元素fixed定位问题思考，你认为下面哪种方式更合理？
微信小程序开发——scroll-view里边放fixed元素后样式错乱
热门推荐
张静的博客
03-14 1万+
问题描述： scroll-view,里面的自定义组件中包含一个fixed弹框，但这个弹框无论怎么设置层级，只能显示在当前scroll-view的有效宽度内。安卓、开发工具都正常。ios不行。 原因： 因为 iOS 下加了 -webkit-overflow-scrolling: touch，这个会产生滚动惯性，体验更好，但会改变 fixed 的行为，建议不在 scroll-view 里有 fixed 元素 解决： 将scroll-view标签改为view，并设置样式： overflow-x: hidden
ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
hahahhahahahha123456的博客
02-28 1216
问题现象 这个问题是最近在优化小程序代码时发现的。 在ios环境下，微信小程序的scrollview组件包裹着一个position：fixed的view。 当在scrollview组件上滑动时，这个view会疯狂抖动。 直接上图吧： 下面是简化后的代码： <view class="main"> <scroll-view scroll-y="{{true...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序的绝对定位或固定定位的弹窗中，如果需要展示可滚动的内容（如列表或长文本），通常需要用到`scroll-view`组件。然而，此时会面临一个问题：无法直接阻止页面本身的滚动。 #### 2.3 解决办法 由于无法...
微信小程序学习用demo：scroll-view 加载更多 搜索框固定
03-15
在这个“微信小程序学习用demo：scroll-view 加载更多 搜索框固定”中，我们可以看到几个关键知识点，包括`scroll-view`组件的使用、加载更多（Loadmore）功能的实现以及搜索框的固定布局。 首先，`scroll-view`是...
uni-app在scroll-view中使用popup、fixed，视图会随着页面滚动
weixin_43447086的博客
01-02 1143
如果要在scroll-view中做下拉刷新就不要有fixed的元素，如果要有下拉刷新，就用页面滚动刷新onPullDownRefresh。这是CSS3的特性，position:fixed 会被transform副作用降级为absolute。
苹果手机 iOS 系统 ，使用scroll-view会把scroll-view里包裹的遮罩层截断失效，（苹果手机、ios系统使用scroll-view，fixed定位层级不正确）
m0_55074611的博客
04-16 1316
苹果手机 iOS 系统 ，使用scroll-view会把scroll-view里包裹的遮罩层截断失效，（苹果手机、ios系统使用scroll-view，fixed定位层级不正确）因为 iOS 下加了 -webkit-overflow-scrolling: touch，这个会产生滚动惯性，体验更好，但会改变 fixed 的行为；解决方法一：把需要fixed定位的元素放在scroll-view外面，方法二：在**全局**（注意是在全局文件中）app.vue中 写入 ，方法三：使用scroll-view中包裹的
ios系统下微信小程序支付宝小程序fixed定位失效
a532443304的博客
10-15 1754
【问题代码】 <scroll-view> <viewclass="bottom"></view> </scroll-view> .bottom { position:fixed; bottom: 0; left: 0; right: 0; } 【问题描述】 类名为bottom的标签在页面不显示，消失了 (ios13不显示,ios1415正常) 【解决...
uni-app：踩坑路---scroll-view内使用fixed定位，无效的问题
本以为成功很简单，没想到活成普通人都需拼尽全力！
07-20 1680
emmm，说起来这个问题整得还挺好笑的，本人在公司内，奋笔疾书写代码，愉快的提交测试的时候，测试跟我说，在苹果手机上你这个样式有bug，我倒是要看看，是什么bug。安卓vs苹果ok，我相信已经看出了差异了，安卓的遮罩层正常显示，而苹果的遮罩层只在我的绿色框内，被截断了，我赶忙看代码：CustomItem.vue：自定义组件蓝色的正方形，外加上一个遮罩层，点击蓝色方块的时候，显示遮罩层，遮罩层内写我的要展示的一些内容。
uniapp使用scroll-view，在其中嵌套的元素使用fixed定位到底部，但是无效。
weixin_73648085的博客
05-06 311
uniapp使用scroll-view，在其中嵌套使用使用fixed定位到底部，但是并不生效效。实际效果是固定在了scroll-view元素的底部，编译到微信小程序可以使用root-portal组件解决，但是app不知到怎么解决。
小程序fixed底部固定定位时，iPhone Xs Max不能正确显示问题
chaosama的博客
11-22 3000
我也是日了，同事有个iPhone Xs Max，发现在底部的绝对定位没法正确显示，想了下问题，应该是Xs的底部太低了。懒得处理，于是问了下小程序社区，看到同样问题的，9月官方就说开始解决了，现在还在，没办法，只能自己动手了。 1、先获取到当前手机型号 wx.getSystemInfo({ success:function(res){ that.setDat...
【微信小程序】底部弹窗固定定位fixed+textarea，导致的adjust-position在安卓手机失效问题
weixin_45446474的博客
01-11 1790
然后我就尝试了第二种方法用scroll-view将高度设置为100vh时，将页面保持在视口高度，这个时候发现不管是弹窗是fixed还是absolute都无法让安卓手机的键盘弹出时textarea顶上去。对于底部弹出的组件我把它高度设置为正常高度+键盘高度，至于键盘高度则去监听键盘的弹出从而获取键盘高度,至于键盘高度变化这部分的动画效果用transition:all 100ms;安卓手机测试时候发现，fixed固定定位导致键盘弹出时，textarea无法正常被顶上去。
小程序之 fixed定位下scroll-view左右滚动失效
fhrlhh的博客
04-07 1742
.fixed{ position: fixed; top: 0; z-index: 9999; width: 100%; } fixed定位+top 0 会让tabs固定在顶部 但是会出现 无法左右滑动问题 这是因为我们没有设置宽度 只要加上width100%就好了 下面是页面代码 <view class="fixed"> <view class="search_box"> <u-input v-mode...
解决微信小程序scroll-view高度自适应问题的方法
尐、孽障的博客
01-12 6910
解决微信小程序scroll-view高度自适应问题的方法
scroll-view 内使用fixed
最新发布
12-27
针对特定平台如微信小程序中的 `scroll-view` 使用情况： - 微信小程序不完全遵循传统的 DOM 结构和 CSS 行为模式；因此，当尝试在一个可滚动区域内设置子项为固定定位时可能会遇到挑战[^2]。 - 推荐的做法是在页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值