收藏
回答

scroll-view组件设置overflow-anchor:auto; 安卓无效?

组件:scroll-view

微信版本:7.0.18

版本库:2.12.2

代码片段:https://developers.weixin.qq.com/s/oME9eemD75kJ



开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效,安卓下可参考 CSS overflow-anchor 属性。

回答关注问题邀请回答
收藏

4 个回答

  • mm
    mm
    2020-09-10

    安卓:



    IOS:


    2020-09-10
    有用 1
    回复 5
    • 徐敏
      徐敏
      2021-12-03
      你好呀,请问这个问题你解决了吗?我也是在做一个类似聊天界面,页面上滑到顶之后请求历史聊天信息。IOS下,开启scroll-anchoring,页面中显示的内容没有改变。而安卓下,就因为获取历史聊天,数据拼接之后,默认跳到了页面最顶部,显示最顶部的内容。使用了overflow-anchor属性也不行。偶然情况下,安卓第一次请求历史数据时正常,但是从第二次开始就都会默认跳回页头,就仿佛overflow-anchor失效了一样。如果看到了,烦请回复。
      2021-12-03
      回复
    • 醉酒浓
      醉酒浓
      2021-12-23回复徐敏
      请问一下,现在这个问题你解决了吗
      2021-12-23
      回复
    • 朝九°
      朝九°
      2022-08-17回复徐敏
      你好,请问后面你解决了吗
      2022-08-17
      回复
    • 朝九°
      朝九°
      2022-08-17
      能贴一下代码吗,大佬
      2022-08-17
      回复
    • 百事
      百事
      2023-12-11回复徐敏
      请问一下 你解决了这个问题了吗 烦请回复
      2023-12-11
      回复
  • 得得得得得得得得得得得得得得得
    得得得得得得得得得得得得得得得
    2021-12-29

    给其他看到这里的开发者:

    首先,到目前2021/12/29为止(或许以后也是这样),scroll-view 的属性 refresher-enabled为true时, overflow-anchor不生效。

    然后, 如果需要css overflow-anchor生效, 滚动条不能在顶部,即scrollTop不能为0,这个行为跟web是一样的。

    所以需要自己做个下拉加载,不能使用scroll-view自己的下拉刷新。然后再插入数据前setData scrollTop值为1,然后再setData数组数据,这样就完美滚动锚定了。

    当然,要做聊天界面的话,还需要许多的细节要实现。这里只给一个非常简单的滚动锚定demo

    https://developers.weixin.qq.com/s/caAlfUmn7YvY


    2021-12-29
    有用
    回复 14
    • OkCoder
      OkCoder
      2022-04-23
      使用uniapp仿你的,没有效果
      2022-04-23
      回复
    • ditto
      ditto
      2022-06-07回复OkCoder
      他的代码运行没问题,但我用uniapp仿了一遍,运行也是无效,难道uniapp有bug?
      2022-06-07
      1
      回复
    • 不知名
      不知名
      2022-12-07回复OkCoder
      有效,需要多加一步处理,uniapp里面需要先把scrollTop先设置为0,请求回来数据后再设置为1,然后再追加数据即可
      2022-12-07
      1
      回复
    • Q
      Q
      2023-03-03回复不知名
      我运行也是没有效果,可以粘贴一下demo吗
      2023-03-03
      回复
    • HappyHong 么么哒
      HappyHong 么么哒
      2023-03-26回复Q
      uniapp 编译app没效果
      2023-03-26
      2
      回复
    查看更多(9)
  • 可乐味儿
    可乐味儿
    2020-09-16

    请问楼主解决了吗?我也遇到这个问题了

    2020-09-16
    有用
    回复 1
    • mm
      mm
      2020-09-18
      安卓是scroll-top为0就会跳到顶部 苹果的不会
      2020-09-18
      1
      回复
  • Cjiang
    Cjiang
    2020-09-09

    你好,安卓加了overflow-anchor:auto可以正常的滚动。控制滚动位置不随内容变化而抖动是什么意思?麻烦提供下具体的复现流程。

    2020-09-09
    有用
    回复 4
    • mm
      mm
      2020-09-10
      下拉加载会从数据会从列表开头加入数据  然后Android中新数据就会顶下来 ios就不会
      2020-09-10
      2
      回复
    • Cjiang
      Cjiang
      2020-09-10回复mm
      顶下来是什么意思?这边安卓的真机和模拟器的调试结果一样。
      2020-09-10
      回复
    • mm
      mm
      2020-09-10
      就是页面会跑到最上面
      2020-09-10
      1
      回复
    • 未名࿐
      未名࿐
      2020-12-03
      遇到同样的问题,安卓设置了overflow-anchor: auto;,视窗内容还是会改变,而ios端正常,scroll-anchoring=“{{true}}” 仅改变滚动条位置,视窗内容未变
      2020-12-03
      回复
登录 后发表内容
问题标签