css（background-attachment：scroll）を使用してコンテンツをスクロールする背景画像を取得できません。

Question

divで背景画像をスクロール可能（固定ではありません）にしようとしています。私は例2をコピーしようとした

：（通常動作します...例えばIE9）

http://www.codertools.com/css_help_guide/css_background-attachment.aspx

ここでは私のバージョンである：（時々動作しません）

http://sky-walker.net/temp/panning/panning2.html

私は基本的に（イメージファイルのパスを除いて）コードをコピーして貼り付けましたが、divをスクロールすると背景イメージは固定されたままです...

例2のように、背景画像をスクロールしたい。

IE9（Windows 7）とChrome 12 Vista用Chrome 12では、最初のリンク（例2）が動作しません。

Answer 1

なぜ背景画像がスクロールする必要がありますか？ 両方の例が同じように機能します。

CSS2 specs：

要素（「オーバーフロー」を参照）スクロール機構を有している場合、「固定」背景要素と移動せず、「スクロール」背景が動きませんスクロール機構。

CSS3 specs：

スクロール
背景要素自体に関して固定されその内容とスクロールしません。 （これは、効果的要素の境界線に接続されている。）

背景はしかし、ビューポートでをスクロールしません。

---

編集：

地元の背景は、要素の内容に関して固定されています：要素がスクロール機構を持っている場合、私はあなたが本当にしたいことはCSS3のlocal背景 - 添付ファイルだと思います要素の内容がののスクロールがスクロールします。

Answer 2

私は最近、古いブラウザを使用してbackground-attachment: localのような動作を「トリックする」必要があるため、ここに投稿しています。

this tableが指摘しているように、IE8とFirefoxはlocalをサポートしていませんが、IE6-7では間違った理由があります。

HTML：：

<div id="main"> 
... 
</div> 

そうでない場合は（十分に決定した誰かによって純粋なJavaScriptで書き換えることができます）少しjQueryの策略で、我々は local要素でサポートされているかどうかを検出し、スクロールの背景をシミュレートすることができます

CSS：

#main { 
    background-attachment: local; 
    overflow: auto; 
    position: relative; /* IE7 wants this for unrelated reasons */ 
    ... 
} 

のjQuery：

if ($('#main').css('background-attachment')!=="local") { 
    // will return the default value of 'scroll' in older browsers 
    $('#main').on('scroll',function() { 
     $main = $(this); 
     $main.css({ 
      'background-attachment': 'fixed', 
      'background-position': '0px '+(0-$main.scrollTop())+'px' 
      // firefox doesn't support 'background-position-y' 
     }); 
    }); 
}; // end if 

CSS localがサポートされている場合は使用され、JavaScriptハックはサポートされていない場合にのみ追加されます。

position: relativeをCSSに追加しなければならなかった理由は、this questionを参照してください。