固定要素でのスクロールを有効にするにはどうすればよいですか？

Question

固定要素をスクロールするときに問題がありますが、私のサイトでは機能しません。しかし、スクロールする例の中には、this oneのような問題はないことがわかりました。しばらくして少しの違いが見つかりました - 私のサイトでは、ページのスクロールはhtmlタグではなく、アプリケーションのルートタグにあります。

ここでは、赤いブロックhttp://jsbin.com/rutogosesa/edit?html,css,outputをスクロールできない赤いブロックhttp://jsbin.com/munixamuqo/edit?html,css,outputをスクロールできる例を示します。

私の疑問は、最初の例でスクロールを許可する方法です。 onwheelイベントを購読してスクロールバーを手動で移動することができますが、すべてのブラウザがスムーズにスクロールするように変わっています。他にも解決策がありますか？

Answer 1

マウスが#innerを超えると、通常の方法（スペースバー、矢印キー、トラックパッド、ホイール）を使用して#outerを上下にスクロールすることはできません。

あなたが持っているものをすべて保持する必要がある場合は、内側の要素にpointer-events: noneを追加して回避してください。 （これはあなたがそれと全くやりとりすることができないことを意味することに注意してください。内側の要素のリンクはクリック可能ではありません。あなたが質問に与えた例を考えれば、それは問題にならないでしょう）

あなたは離れてあなたの htmlのスタイルを変更することで得ることができる場合

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    overflow: hidden; 
 
} 
 
#inner { 
 
    position: fixed; 
 
    background: red; 
 
    width: 200px; 
 
    height: 200px; 
 
    pointer-events: none; /* this is your fix. note it doesn't work in IE < 9 */ 
 
} 
 
#outer { 
 
    overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */ 
 
    background: blue; 
 
    height: 100%; 
 
} 
 
#push { 
 
    height: 2000px; 
 
}

<div id="outer"> 
 

 
    <p>top of #outer</p> 
 

 
    <div id="inner"> 
 
    #inner 
 
    </div> 
 

 
    <div id="push" /> 
 
</div>

、あなたはhtml {height: 100%; overflow: hidden}をドロップすることによってこの問題を回避することができます。この解決策ではpointer-events: noneを使用しないので、内部要素とやりとりすることができます！

html { 
 
    margin: 0; /* dropped html {height: 100%; overflow: hidden} */ 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#inner { 
 
    position: fixed; 
 
    background: red; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
#outer { 
 
    overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */ 
 
    background: blue; 
 
    height: 100%; 
 
} 
 
#push { 
 
    height: 2000px; 
 
}

<div id="outer"> 
 

 
    <p>top of #outer</p> 
 

 
    <div id="inner"> 
 
    #inner 
 
    </div> 
 

 
    <div id="push"></div> 
 
</div>