0

ボディの高さは1000ピクセルで、画面の高さは100ピクセルです。幅と高さ<div>全体を占めるを表示したかったのです。それは1つあり、ビューポートの中央に表示したいと思います。Javascriptを使用してこれを実現するにはどうすればよいですか。 <body><body><div>background-image

私は以下の概念を使用しましたが、モバイルデバイスでは機能しませんでした

  ele.style.backgroundPosition = document.body.scrollTop + 
                                 (window.innerHeight / 2) - heightOfImage;
4

1 に答える 1

0

最も簡単な解決策は、背景画像を設定して固定配置<div />し、ページ上の他のすべての要素の下に表示されるように z-index を設定することです。

例: http://jsfiddle.net/gztRa/

本当に JavaScript の道を進みたいのであれば (私がここで手助けできるなら個人的にはやりたくないでしょう)、次のようなことをしなければなりません:

  1. スクロールしている要素のスクロールイベントに接続する
  2. これが発火するたびに、スクロール位置を次のように調整します。

var verticalPosition = document.body.scrollTop + (window.innerHeight / 2) - heightOfImage;

ele.style.backgroundPosition = 'center ' + verticalPosition + 'px';

の追加に注意してください'px'。これは重要です。"center" の後にスペースがあるので、次のようになりますele.style.backgroundPosition = 'center 50px'。

例 (Zepto または jQuery を使用): http://jsfiddle.net/7aqgG/7/

于 2012-12-10T11:59:55.460 に答える