Question

我有一个具有以下功能的页面：有一个大图像生成scoll（水平和垂直）和一个固定位置的按钮（它保留在左上角，即使有滚动），点击时，使图像适合客户端宽度。

由于Internet Explorer 8不支持position: fixed，因此我使用了一种解决方法 - 这是函数：

function setFixedPosition(jqueryWrapper, pixelsFromTop, pixelsFromLeft) {

    jqueryWrapper.css('position', 'absolute');

    var setOffsets = function() {
        jqueryWrapper.css("top", (($(window).scrollTop() + pixelsFromTop) + "px"));
        jqueryWrapper.css("left", (($(window).scrollLeft() + pixelsFromLeft) + "px"));
    };

    setOffsets();

    $(window).scroll(function() {
        setOffsets();
    });
}

setFixedPosition($('#zoomFitButton'), 15, 15);

这是按钮的动作：

$('#zoomFitButton').click(function() {
    $('img.preview').css('width', '100%');
});

该按钮在Firefox 13和IE8中都保持固定。

但是，在IE8下，如果我在某处滚动，那么我点击按钮，按钮移动到“奇怪”的位置：

如果我垂直滚动，然后点击，它会将按钮放在左下角;
如果我水平滚动，然后单击，它会将按钮放在右上角;
如果我双向滚动，然后单击，它会将按钮放在中间位置。

在Firefox中，即使单击“适合宽度”按钮，按钮也始终保留在左上角（我期望的位置）。

这是a test page。

我的代码是否可用于此功能（原则上），或者我需要在适合宽度操作中添加一些内容（以修复我的按钮定位）;或者IE有问题（我需要一个解决方法 - 如果有的话，有什么建议吗？）？

感谢。

Answer 1

我找到了一个适用于IE6的解决方案。

我认为问题与IE在调整文档大小后不更新scrollTop和scrollLeft位置有关。
因此，在我调整图片大小后，我必须滚动到左上角（scrollTop（0）和scrollLeft（0））。
不幸的是，如果我有一张需要垂直滚动的大图片，即使它适合宽度，解决方法也会将我带到页面顶部。所以我添加了代码，让我按比例回到我以前的近似位置。我将逻辑包装在更通用的函数中：

function doSomethingThatAffectsScrollPosition(affectingScrollPositionFunction) {

    var oldDocumentWidth = $(document).width();
    var oldScrollFromLeft = $(window).scrollLeft();

    var oldDocumentHeight = $(document).height();
    var oldScrollFromTop = $(window).scrollTop();

    affectingScrollPositionFunction();

    var newDocumentWidth = $(document).width();
    var widthRatio = (newDocumentWidth / oldDocumentWidth);
    var newScrollFromLeft = (oldScrollFromLeft * widthRatio);

    var newDocumentHeight = $(document).height();
    var heightRatio = (newDocumentHeight / oldDocumentHeight);
    var newScrollFromTop = (oldScrollFromTop * heightRatio);

    $(window).scrollLeft(0); // Needed for button repositioning
    $(window).scrollLeft(newScrollFromLeft);

    $(window).scrollTop(0); // Needed for button repositioning
    $(window).scrollTop(newScrollFromTop);
}

我在fit to width按钮的动作中使用了该函数：

$('#zoomFitButton').click(function() {
    doSomethingThatAffectsScrollPosition(function() {
        $('img.preview').css('width', '100%');
    });
});

Here是一个测试页。

使用固定定位按钮使图像适合宽度

1 个答案: