Question

我正在开发Ruby On Rails，并在项目中集成了Facebook Send按钮。单击“发送”按钮时，弹出窗口将离开屏幕并导致水平滚动条。我在一些博客网站和stackoverflow上尝试了一些解决方案，但无法解决问题。

以下是一些屏幕截图：

点击发送按钮http://imgur.com/wv2HZ

视图中的代码：

fbsend.html.erb（使用HTML5代码）

<div class="right">
    <script>(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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <div class="fb-send" data-href="MY_SITE_URL"></div>
</div>

application.html.erb

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#appId=MY_APP_ID&amp;xfbml=1"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
        FB.init({
            appId: "MY_APP_ID",
            cookie: true,
            xfbml: true
        });
</script>

如何解决问题，弹出窗口是否适合屏幕，不会导致水平滚动条？

由于

Answer 1

我相信评论框会放入自己的iframe中，因此您应该可以独立于按钮/等将其重新放置在您自己的CSS中。

该方法的一个问题是注释框顶部的小注释“指针”三角形将不再针对触发按钮。也许父容器上的overflow:hidden可以允许您从视图中隐藏该部分。

祝你好运！

Answer 2

将display:none添加到#fb-root为我工作：

<div id="fb-root" style="display:none;"></div>

Answer 3

好吧，在图片中看到发送框，点击后，用滚动条扩展窗口的宽度，这样你就可以滚动到框。这很正常。您的选择：

一个。再向左移动发送按钮，点击它，它不会越过窗口边框，所以不需要滚动条。

湾在overflow-x:hidden;元素的CSS中添加<body>样式属性。这样，用户就无法看到整个盒子。

Facebook发送按钮导致水平滚动

3 个答案: