0

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

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

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 中，该按钮始终保留在左上角（我期望的位置），即使在我单击了适合宽度按钮之后也是如此。

这是一个测试页。

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

谢谢。

4

1 回答 1

0

我找到了一个也适用于 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);
}

我在适合宽度按钮的操作中使用了该功能：

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

这是一个测试页面。

于 2012-07-10T10:05:12.917 回答