当窗口有滚动条时，jquery对话框覆盖滚动条

Question

我正在使用jquery对话框来显示对话框。我可以把它放在我想要它的左下角。麻烦的是，如果主窗口有滚动条，对话框会转到滚动条的bottom left，从而覆盖滚动条。可以预期窗口的bottom left表示滚动条的bottom right而不是滚动条的bottom left。

我已尝试将position object选项指定给jquery对话框但未成功。我已经尝试了位置对象中碰撞选项的所有四个值fit, flip, flipfit and none。但他们似乎都没有做到这一点。

我知道有一种hacky方法来计算滚动条的宽度并将对话框移动那么多，我已经在很多地方使用了这个hack。但我希望有一种API方式来做到这一点。

有人知道某种方式吗？

实际行为

预期行为

Answer 1

以下示例适用于我（code，fullscreen）：

$("#dialog").dialog({
    position: {
        my: "right bottom",
        at: "right bottom",
        of: window
    }
});

请注意，代码包含在$(function(){})构造中，这意味着在加载DOM并且浏览器计算是否需要滚动条之后创建对话框。也许你过早地调用对话框。

Answer 2

没有真正的方法可以做到这一点，所有浏览器都在显示左侧的滚动条。理想的方法是不使用左侧的滚动条。希伯来语和阿拉伯语的大多数着名新闻纸网站似乎使用正确的滚动条。因此，事实上的标准是使用右侧的滚动条而不管语言。

这不是左滚动条引入的唯一问题。

• 即使您标记了html RTL，Safari也不会在左侧显示滚动条。

• Firefox显示左侧的滚动条。但它破坏了绝对的左和上计算。

  • 假设您在html中标有RTL的图像。您想在图像上叠加div。因此，您需要获取图像的左侧，顶部，宽度和高度。您的滚动条位于左侧，因为它是RTL语言。当您询问图像的尺寸时，firefox将返回正确的尺寸。现在，如果您将这些尺寸应用于要覆盖在图像上的div，则firefox会将左侧滚动条的右上侧视为原点。请注意，图像是以左侧滚动条的左上角作为原点渲染的，因此您的叠加层会因滚动条宽度而关闭。

• Chrome似乎是唯一能够很好地实现此功能的浏览器。但是因为其他浏览器没有很好地实现这一点，所以无论如何我们最终都会使用特定于浏

• IE9和IE8的行为与Firefox完全相同。

无论如何，我的答案更多的是咆哮，所以其他人可能会觉得这很有帮助。

Answer 3

我猜你在Mac上有那些讨厌的自动隐藏滚动条？您可以尝试使用CSS始终在正文上显示滚动条：

body { overflow-y: scroll }

Answer 4

实际上没有办法定义div中的区域减去滚动条，因为滚动条在div中。滚动条不作为容器存在。至少在使用css并设置overflow: scroll时就是这种情况。可能有一些用于Scrollbars的jQuery插件。

我能做的最好的事情就是用一个标准20px宽的空间来抵消这个位置。这是我使用的。

    $( "#dialog" ).dialog({
        position: { 
            my: 'right bottom',
            at: 'right-20px bottom',
            of: $("#some_div")
        }
    });

Answer 5

在css上试试

#dialog{
   position: fixed;
   bottom:0;
   left:0;
}

Answer 6

这个技巧可以帮助您获取任何浏览器的滚动条宽度，您可以将其用作函数：

How can I get the browser's scrollbar sizes?

如果滚动条没有显示，如果你担心要离开空格，你可以用css强制它：

body {
  overflow-y: scroll;
}