0

私は次の機能を備えたページを持っています: スクロールを生成する大きな画像 (水平方向と垂直方向の両方) と固定位置のボタン (スクロールしても左上隅に残ります) があり、クリックするとイメージをクライアントの幅に合わせます。

は 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 では、[幅に合わせる] ボタンをクリックした後でも、ボタンは常に左上隅 (期待される場所) に残ります。

ここにテストページがあります。

私のコードはこの機能に対して (原則として) OK ですか、または幅に合わせるアクションに何かを追加する必要があります (ボタンの位置を修正するため)。または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 に答える