gpt4 book ai didi

css - 位置 :fixed in facebook canvas (iframe)

转载 作者:行者123 更新时间:2023-11-28 08:43:11 24 4
gpt4 key购买 nike

我们希望在我们的 facebook canvas 应用程序中有一个 position:fixed 的 anchor DOM 元素,它具有可变的 Canvas 大小。因为应用程序在 Canvas iframe 中运行,所以简单地使用 css position:fixed 不起作用:iframe 内容看不到来自周围 facebook 页面的任何滚动事件。

解决此问题的第一种方法是 ping facebook api 并获取滚动位置。所以我们把它放到 $(document).ready() 中:

# refresh position of feedback button to simulate position:fixed in iframe
refresh_timer = 1000
move_button = () ->
# get scroll position from facebook
FB.Canvas.getPageInfo (info)->
# animate button to new position with an offset of 250px
$('#fdbk_tab').animate({top: info.scrollTop+250}, 100)
# start interval to do the refresh
setInterval(move_button, refresh_timer)

一般来说这确实有效。然而,当触发对 facebook api 的调用时,浏览器重新加载按钮和鼠标光标会闪烁,这会导致糟糕的用户体验。

非常感谢任何关于如何改进此方法或其他方法来实现/模拟 position:fixed 在 iframe 中的建议!

最佳答案

我怀疑这与您设置应用 HTML 布局的方式有关。我在我的测试应用程序中做了一个快速测试并且它有效。文档的正文只包含一个具有绝对定位的 div,其中包含带有 position:fixed 的 anchor div 和一些文字,因此您可以看到滚动。代码如下所示:

<body>
<div style="width: 300px; height: 2000px; position: absolute; top: 0; background-color: yellow;">
<a href="www.google.com">
<div style="width: 60px; height: 20px; background-color: #000; position: fixed; top: 20px;">
ANCHOR
</div>
1words<br/>
1words<br/>
words<br/>
words<br/>
words<br/>
words<br/>
2words<br/><br/><br/><br/>
2words<br/>
words<br/>
words<br/>
words<br/>
words<br/>
words<br/>
3words<br/><br/><br/><br/>
3words<br/>
words<br/>
words<br/>
words<br/>
words<br/>
words<br/>
4words<br/><br/><br/><br/>
4words<br/>
words<br/>
words<br/>
words<br/>
words<br/>
words<br/>
words<br/><br/><br/><br/>
</a>
</div>

你可以看到工作中的例子here (我刚刚删除了国家/地区限制,如果出于任何原因您无法访问该应用,请告诉我,我会再次检查设置)。

关于css - 位置 :fixed in facebook canvas (iframe),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9631014/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com