Facebook 聊天插件在加载时自动将页面滚动到顶部
Facebook chat plugin auto scrolls page to top when loaded
我在一个由 OpenCart 提供支持的站点上使用 Facebook Chat 插件版本 8.0(尽管我怀疑它会在任何 CMS 中发生)。聊天插件完全加载和图标出现在页面右下角总是需要几秒钟。
但是,当显示图标时,页面会立即滚动到顶部。因此,如果用户已经开始向下滚动,他将被打断并重置页面。
知道是什么原因造成的以及如何预防吗?
这是我的代码(Facebook 在“设置”->“消息”->“将 Messenger 添加到您的网站”中自动生成的原始代码):
<script>
FB.init({
xfbml : true,
version : 'v8.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your Chat Plugin code -->
<div class="fb-customerchat"
greeting_dialog_display="hide"
attribution=setup_tool
page_id="xxxxxxxxxxxxxxxx"
theme_color="#67b868">
</div>
事实证明,此行为仅发生在模拟智能手机的响应式设计模式下的 PC 网络浏览器上(已在 Chrome 84.0 和 Firefox 79.0 上测试)。
在实际的智能手机上它不会滚动到顶部。
编辑:我错了,它毕竟在我的智能手机上滚动到顶部。这个问题的临时解决办法请看第一个回答
当前正在此处跟踪错误:https://developers.facebook.com/support/bugs/619023102320436/。
目前我已经实施了以下 hack(在插件加载时间左右):
var originalScrollTo = window.scrollTo;
window.scrollTo = function() {};
setTimeout(function() {
window.scrollTo = originalScrollTo;
}, 5000);
我在一个由 OpenCart 提供支持的站点上使用 Facebook Chat 插件版本 8.0(尽管我怀疑它会在任何 CMS 中发生)。聊天插件完全加载和图标出现在页面右下角总是需要几秒钟。
但是,当显示图标时,页面会立即滚动到顶部。因此,如果用户已经开始向下滚动,他将被打断并重置页面。
知道是什么原因造成的以及如何预防吗?
这是我的代码(Facebook 在“设置”->“消息”->“将 Messenger 添加到您的网站”中自动生成的原始代码):
<script>
FB.init({
xfbml : true,
version : 'v8.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your Chat Plugin code -->
<div class="fb-customerchat"
greeting_dialog_display="hide"
attribution=setup_tool
page_id="xxxxxxxxxxxxxxxx"
theme_color="#67b868">
</div>
事实证明,此行为仅发生在模拟智能手机的响应式设计模式下的 PC 网络浏览器上(已在 Chrome 84.0 和 Firefox 79.0 上测试)。
在实际的智能手机上它不会滚动到顶部。
编辑:我错了,它毕竟在我的智能手机上滚动到顶部。这个问题的临时解决办法请看第一个回答
当前正在此处跟踪错误:https://developers.facebook.com/support/bugs/619023102320436/。
目前我已经实施了以下 hack(在插件加载时间左右):
var originalScrollTo = window.scrollTo;
window.scrollTo = function() {};
setTimeout(function() {
window.scrollTo = originalScrollTo;
}, 5000);