小程序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 版权协议，转载请附上原文出处链接和本声明。

探讨了在scroll-view中使用fixed定位时，iOS与安卓显示效果的差异。指出在iOS系统上，scroll-view中使用fixed定位可能导致元素显示不全的问题，并分享了解决方案。

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 191
这个问题其实在 Web 开发中也经常遇到，而在uniapp项目中更容易踩雷，毕竟你看不到框架在背后加了什么样式，只有浏览器 / 小程序实际表现出问题你才会意识到。希望这篇文章能帮你避坑。如果你也踩过类似的坑，欢迎评论区分享你的处理方式！
微信小程序Scroll-view的一个心得
baidu_33548663的博客
07-20 1931
今天写小程序突然要用到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 1236
今天实现需求时，遇到一个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 3334
scroll-view fixed无效
ios机型小程序中scroll-view与其内元素fixed定位问题思考，你认为下面哪种方式更合理？
qq_45290368的博客
03-07 628
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 1237
问题现象 这个问题是最近在优化小程序代码时发现的。 在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 1210
如果要在scroll-view中做下拉刷新就不要有fixed的元素，如果要有下拉刷新，就用页面滚动刷新onPullDownRefresh。这是CSS3的特性，position:fixed 会被transform副作用降级为absolute。
小程序中 scroll-view 里面包括的 固定定位fixed 元素 不生效得问题
业余前端的职业经历
07-28 5244
因为要做 触底加载更多的功能 所以我把整个页面的元素放入到 scroll-view中 但是出现了一个 问题 原来 点击一个元素 弹出 固定定位的悬浮框出不来了 view{ position:fixed; } <scroll-view> 内容部分 <view></view> </scroll-view> 解决方法 吧 定位的那个元素拿出来 就可以了 <scroll-view> 内容元素 </scroll-view> &lt
苹果手机 iOS 系统 ，使用scroll-view会把scroll-view里包裹的遮罩层截断失效，（苹果手机、ios系统使用scroll-view，fixed定位层级不正确）
m0_55074611的博客
04-16 1516
苹果手机 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 1787
【问题代码】 <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 1867
emmm，说起来这个问题整得还挺好笑的，本人在公司内，奋笔疾书写代码，愉快的提交测试的时候，测试跟我说，在苹果手机上你这个样式有bug，我倒是要看看，是什么bug。安卓vs苹果ok，我相信已经看出了差异了，安卓的遮罩层正常显示，而苹果的遮罩层只在我的绿色框内，被截断了，我赶忙看代码：CustomItem.vue：自定义组件蓝色的正方形，外加上一个遮罩层，点击蓝色方块的时候，显示遮罩层，遮罩层内写我的要展示的一些内容。
uniapp使用scroll-view，在其中嵌套的元素使用fixed定位到底部，但是无效。
weixin_73648085的博客
05-06 352
uniapp使用scroll-view，在其中嵌套使用使用fixed定位到底部，但是并不生效效。实际效果是固定在了scroll-view元素的底部，编译到微信小程序可以使用root-portal组件解决，但是app不知到怎么解决。
小程序fixed底部固定定位时，iPhone Xs Max不能正确显示问题
chaosama的博客
11-22 3037
我也是日了，同事有个iPhone Xs Max，发现在底部的绝对定位没法正确显示，想了下问题，应该是Xs的底部太低了。懒得处理，于是问了下小程序社区，看到同样问题的，9月官方就说开始解决了，现在还在，没办法，只能自己动手了。 1、先获取到当前手机型号 wx.getSystemInfo({ success:function(res){ that.setDat...
苹果手机微信小程序fixed失效问题记录
06-13 2162
小程序fixed苹果手机失效解决方案
小程序scrollview,position:fixed, 滚动scrollview 不影响页面滚动方法
IT技术宅-北方的刀郎
12-21 856
scrollview滚动到最顶部或最底部 就不影响页面的滚动了。在posion:fiexed 的元素上加上。这样滚动 浮动层里的。
scroll-view 内使用fixed
最新发布
12-27
针对特定平台如微信小程序中的 `scroll-view` 使用情况： - 微信小程序不完全遵循传统的 DOM 结构和 CSS 行为模式；因此，当尝试在一个可滚动区域内设置子项为固定定位时可能会遇到挑战[^2]。 - 推荐的做法是在页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值