小程序
小游戏
企业微信
微信支付
扫描小程序码分享
这个是正常现象，因为 iOS 下加了 -webkit-overflow-scrolling: touch，这个会产生滚动惯性，体验更好，但会改变 fixed 的行为，建议不在 scroll-view 里有 fixed 元素
21 个评论
加粗
标红
插入代码
插入链接
插入图片
上传视频
部分兼容方案
可以加个试试呢 .wx-scroll-view {
-webkit-overflow-scrolling: auto;
}
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
可以利用<root-portal>组件将需要fixed定位的view包裹起来，可以脱离文档流
<root-portal wx:if="{{show}}" enable="{{true}}"> <view style="position: fixed;left:0;top:0;"></view> </root-portal>
https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html
给大家写一个 不局限于navbar导航的的案例，适合做横向产品列表一类 ，去掉图片也可以做navbar导航。 帮助后生少走弯路，记得多看社区评论。
HTML <scroll-view class="scroll-table" scroll-x style="width: 100%"> <view wx:for="{{periphery}}" data-id="{{item.id}}" class="scroll_box" bindtap="isChoice"> <view class="scroll_single"> <image src="../../../resource/images/index/iconHome.png"></image> <text>{{item.name}}</text> </view> </view> </scroll-view> CSS .scroll-table { width: 100%; height: 160rpx; background: skyblue; padding: 14rpx 0; white-space: nowrap; } .scroll_box { display: inline-block; width: 24%; height: 150rpx; font-size: 30rpx; background: pink; margin-right: 20rpx; } .scroll_single { width: 100%; height: 150rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26rpx; color: rgb(97, 97, 97); } JS periphery:[ { id: 1, name: '老君山' }, { id: 2, name: '恒山' }, { id: 3, name: '泰山' }, { id: 4, name: '衡山' }, { id: 5, name: '华山' }, { id: 6, name: '嵩山' } ], //跳转方法 isChoice(e) { let id = e.currentTarget.dataset.id; console.log(id); wx.navigateTo({ // url: '跳转路径+携带id 例如', url: '../peak/peak?id=' + id, }) },
2022年都快过半了，还能解决吗
就因为这个问题，我都不知道骂了多少句“lj苹果”了
2025年了，过来鞭尸
5202年了 还没有解决 ，使用粘性布局好像会有卡顿效果，是否可以将view的scroll事件暴露出来
scroll-view组件里面有个position:fixed；他的下面有个canvas组件，我了个天！这个canvas根据页面滚动移动位置，我一层层套盒子定位不行，我用position:fixed这个上一级套个root-portal组件也不行；-webkit-overflow-scrolling: auto这个加在scroll-view组件上也不想。这是要咋样
2024年依然存在这个问题
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
部分兼容方案
可以加个试试呢 .wx-scroll-view {
-webkit-overflow-scrolling: auto;
}
可以利用<root-portal>组件将需要fixed定位的view包裹起来，可以脱离文档流
<root-portal wx:if="{{show}}" enable="{{true}}"> <view style="position: fixed;left:0;top:0;"></view> </root-portal>https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html
给大家写一个 不局限于navbar导航的的案例，适合做横向产品列表一类 ，去掉图片也可以做navbar导航。 帮助后生少走弯路，记得多看社区评论。
HTML <scroll-view class="scroll-table" scroll-x style="width: 100%"> <view wx:for="{{periphery}}" data-id="{{item.id}}" class="scroll_box" bindtap="isChoice"> <view class="scroll_single"> <image src="../../../resource/images/index/iconHome.png"></image> <text>{{item.name}}</text> </view> </view> </scroll-view> CSS .scroll-table { width: 100%; height: 160rpx; background: skyblue; padding: 14rpx 0; white-space: nowrap; } .scroll_box { display: inline-block; width: 24%; height: 150rpx; font-size: 30rpx; background: pink; margin-right: 20rpx; } .scroll_single { width: 100%; height: 150rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26rpx; color: rgb(97, 97, 97); } JS periphery:[ { id: 1, name: '老君山' }, { id: 2, name: '恒山' }, { id: 3, name: '泰山' }, { id: 4, name: '衡山' }, { id: 5, name: '华山' }, { id: 6, name: '嵩山' } ], //跳转方法 isChoice(e) { let id = e.currentTarget.dataset.id; console.log(id); wx.navigateTo({ // url: '跳转路径+携带id 例如', url: '../peak/peak?id=' + id, }) },2022年都快过半了，还能解决吗
就因为这个问题，我都不知道骂了多少句“lj苹果”了
2025年了，过来鞭尸
2025年了，过来鞭尸
5202年了 还没有解决 ，使用粘性布局好像会有卡顿效果，是否可以将view的scroll事件暴露出来
scroll-view组件里面有个position:fixed；他的下面有个canvas组件，我了个天！这个canvas根据页面滚动移动位置，我一层层套盒子定位不行，我用position:fixed这个上一级套个root-portal组件也不行；-webkit-overflow-scrolling: auto这个加在scroll-view组件上也不想。这是要咋样
2024年依然存在这个问题