2016-03-19 28 views
0

私はposition:fixed; width/height:100%; overflow:autoの親とposition:fixedの子を持っています。親のコンテンツがオーバーフローして親がスクロールを開始すると、ビューポートに関連して子供が固定されたままになると思います。それはしません。位置のある子供:固定スクロール、固定:オーバーフロー:自動親

シナリオは、cssトランスフォームを使用してコンテンツの上にスライドするダウンパネルです。スライドダウンパネルには閉じるボタンがあり、パネルのコンテンツがスクロールしている間は表示されたままになります。 .overlay要素の.overlay-slidedownクラスを.overlay-fadeに変更してください。この場合、閉じるボタンはその場所にとどまります。

https://jsfiddle.net/xajk7uez/3/

答えて

0

あなたは.overlay-closeposition: fixed;が動作するoverflow-y: scroll;に取り組むだけに.overlay-closeに兄弟として.overlay内の余分なレイヤを追加した場合。この.overlay-content層は、100%の幅/高さが

.overlay > .overlay-content { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

は、デモ用のFIDLEを更新参照してくださいする必要があります。

https://jsfiddle.net/n0wxfc60/2/

+0

あなたのフィドルはそれをしませんが、これは私がしたものです。私は 'overlay:auto'を' .overlay'クラスから '100%幅/高さでなければならない' .overlay-content'クラスに移動しました – lavirius

+0

@lavirius私のJSFiddleは何とか壊れてしまいました。州...それは解決されてうれしい。 – Roy

+1

私はあなたの答えを更新し、それを受け入れました。 – lavirius

0

あなたの問題のためのソリューションは、私がこのquestionアドレスあなたの問題を信じてここhttps://jsfiddle.net/xajk7uez/5/

を私の編集を参照してください.overlay

.overlay-close

配置されます。

+0

既にそれをしました。この場合、閉じるボタンは、パネルの一部ではなく、パネルの内容が移動している間に固定されたまま、パネルが上下にスライドしている間に、非表示を示します。 – lavirius

+0

変換を使用しないで達成する必要があります。 – Sachin

+0

私は変換を使用しない場合、私は何か他のものを "達成"しています...いいえ、これまでの解決方法は、メインコンテナ内の子供のコンテナ内にスクロールするコンテンツをスライドさせることです。 – lavirius