1

基本的に私がやっているのは、水平スクロールが変更されたかどうかを確認するリスナーです。スクロールが変更された場合、div の位置が変更されるため、常にビューポートの左上隅に配置されます。値を使用するのは非常に簡単getScroll()です。

しかし、どうすれば左から右に変更できますか? 問題はそのとおりです: 0 は div を画面のほぼ中央に配置し、スクロールまたはズームによってそこにとどまるため、機能しません (Windows Phone 7 はサポートしていませんposition: fixed!) おそらく誰かが同様の問題に遭遇し、修正または正しく計算する方法を見つけましたか?

また、body が常に 1024px (ビューポート サイズと同じ) なのはなぜですか? また、ウェブサイトの合計サイズを取得する方法はありますか?

これまでに使用した変数は次 のとおりですwindow.getScroll().x。document.body.scrollWidthwindow.innerWidth

body {
    width: 2000px;
    height: 2000px;
}
#rightDiv { 
    right: 0px;
    top: 0px;
    position: fixed;
}

<body>
<div id='rightDiv'>
    I am in the right-top corner    </div>
</body>
4

1 に答える 1

0

これは、jQuery を使用して実現できます。

$(function(){
    function moveDiv(){
        var divSize = $("#rightDiv").width();
        var windowSize = $("window").width();
        var leftPos = windowSize - divSize;
        var topPos = $("window").scrollTop();
        $("#rightDiv").css({"position":"absolute", "left":leftPos, "top":topPos});
    }
    moveDiv();
    $("window").scroll(function(){
        moveDiv();
    }
    );
    $("window").resize(function(){
        moveDiv();
    }
    );
});

これにより、ドキュメントが読み込まれたときにdivが画面の右側に配置されるように設定され、画面がスクロールされるたびに位置が再計算されます。

基本的に、div の幅とウィンドウのサイズに基づいて計算を行い、div を右上隅に配置する左の位置を決定します。左から配置されていても、画面の右上にあるという効果が得られます。説明が必要な場合はお知らせください。

于 2013-07-02T23:43:51.147 に答える