1

我有这个小提琴，如果你在 Chrome 或 IE 中查看它可以正常工作。您只需单击橙色框，框就会滑出，然后再次单击，它会返回到原来的位置。

但是，如果您在 Firefox 中查看它（确保滚动条显示在右下角的框架中）然后定位框的 CSS

right: -290px;

正如我所期望的那样设置相对于滚动条左边缘的位置......

但是 jQuery（注意 =-290px 应该将其重置为第二次单击时的位置）

$('#slideClick').toggle(function() {
                $(this).parent().animate( { right: '0px' }, {queue:false, duration: 500});
            }, function() {
                $(this).parent().animate( { right: '-290px' }, {queue:false, duration: 500});
            });

设置相对于滚动条右边缘的位置，给出 17px 的不一致。

这是一个已知的错误，还是我只是在某个地方弄错了。如果它是一个错误，解决方法是什么？

4

3 回答 3

2

这也将起作用。我也遇到过类似的问题，Firefox 对滚动条的处理方式不同。此解决方案不适用于 JQuery 1.9 及更高版本。您现在应该使用特征检测http://api.jquery.com/jQuery.support/但我还没有进入。希望这可以帮助 ：）

    jQuery(function($) {
        $('#slideClick').toggle(function() {
            $(this).parent().animate( { right: '0px' }, {queue:false, duration: 500});
        }, function() {
            if ($.browser.mozilla && ($(document).height() > $(window).height()))
            {
                $(this).parent().animate({right: '-275px'},500);
            }
            else $(this).parent().animate( { right: '-290px' }, {queue:false, duration: 500});
        });
    });
于 2013-05-16T00:51:29.623 回答
1

最终像这样修复它（检测浏览器是否 FF 以及滚动条是否可见 - 如果是，则添加 17px 右边距 - 不漂亮但它有效）

编辑 - 添加基本小提琴和更新的小提琴，在浏览器窗口最终被用户缩放（或调整大小）的情况下修复元素的位置。

    $('#slideClick').toggle(function() {
        $(this).parent().animate( { right: '0px' }, {queue:false, duration: 500});
    }, function() {
        $(this).parent().animate( { right: '-290px' }, {queue:false, duration: 500});

        // If UA is firefox and vert scrollbar present
        if ( ( navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ) && ( $(document).height() > $(window).height() ) ) {
            $('#slideOut').css('margin-right', '17px');
        }
    });
于 2013-05-16T00:33:37.197 回答
0

可能与this question以及firefox如何处理滚动条宽度与webkit不同

于 2013-05-16T00:05:42.000 回答