位置固定要素の上をスクロールするとコンテナがスクロールしません

Question

オーバーフロー：スクロールのあるコンテナ内の固定要素の位置の上をスクロールできないという問題があります。

.container {overflow: scroll; height: 200px;} 
.right {position: fixed;} 
.left {height: 2000px;} 

この例を検討してください：jsfiddle。

コンテナ内をスクロールすると、ページがスクロールします。しかし、固定要素の上にカーソルを置いてスクロールすると（コンテンツが固定されます）、コンテナはスクロールしません。

アイデア？

EDIT

私はまた、前のページに行くボタンであるとして、右の固定コンテンツをクリックできるようにする必要があります。したがって、z-index: -1;は動作しません。

編集編集

解決策が見つかりました。 jQuery mousewheelを使用し、.rightクラスのマウスホイール機能に基づくスクロールをコンテナに与えることで、うまく動作します。更新されたjsfiddleを参照してください.jQueryマウスホイールはjsに直接組み込まれています。

Answer 1

要素をposition: fixedまたはposition: absoluteに設定した要素は、もはや親コンテナの内側にあると見なされません。

マウスカーソルがfixed要素の上にある場合、スクロールを必要とするほどの高さではない最も外側の文書をスクロールしようとしています。

CodePenの出力セクションのサイズを現在のコンテンツの高さよりも小さくする場合は、fixed要素の上をスクロールしてみてください。

Answer 2

このは期待される動作である - しかし、あなたはそれにz-index: -1を追加することにより、順序を積み重ねるにcontainer背後rightを押しこの問題を解決することができます。しかし、rightのリンクをクリックすることはできません。はい、それは問題である

.container { 
 
    overflow: scroll; 
 
    float: left; 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.left, .right { 
 
    float: left; 
 
} 
 

 
.left { 
 
    width: 60%; 
 
    height: 2000px; 
 
    border: 3px solid blue; 
 
} 
 

 
.right { 
 
    width: 40%; 
 
    position: fixed; 
 
    border: 3px solid red; 
 
    left: 60%; 
 
    z-index: -1; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    content left 
 
    </div> 
 
    <a href="#" class="right"> 
 
    content right fixed 
 
    </a> 
 
</div>