2017-05-23 10 views
0

親divでスクロールすると、子はスクロールしてから最後までスクロールする必要があります。親divでスクロールしながら子divをスクロール

私はこの逆のロジックに Scrolling in child div (fixed) should scroll parent div

を試みたが、動作しません。これを実現する方法を提案してください。

.scrolling-child{ height: 50px; width:400px; border:1px solid green; overflow:scroll; } 
 
.parent { height: 5000px; width:100%; padding: 20px 0; border:1px solid red; overflow:scroll;}
<div class="parent"> 
 
<div class="scrolling-child"> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 
</div>

+0

が、親はどのようにスクロールすることができますので、オーバーフローを持っていませんか?また、なぜあなたはその機能を望んでいますか? – Pete

+0

スクロールも追加しました。このスニペットは私のウェブページの小さな部分です。私はより良い外観と感じるためにこれが必要です。 – Aratidgr8

+0

もう一度、内側のコンテンツはスクロールするのに十分なほど大きくないので、私はあなたが何をしたいかわかりません。 – Pete

答えて

0

私はちょうど位置追加正しく理解していた場合:固定します。スクロール・チャイルド・ディビジョンへ下記参照。

.scrolling-child{height: 50px; width:400px; border:1px solid green; overflow:scroll; position:fixed;} 
 

 
.parent {height: 5000px; width:100%; padding: 20px 0; border:1px solid red; }
<div class="parent"> 
 
<div class="scrolling-child"> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 
</div>

+1

OPが探しているものとは思いません。私が質問を解釈する方法は、ユーザーが親divをスクロールすることを希望し、子divが下にない間に、子div endに達するまで下にスクロールします。その後、親divをスクロールし続けます。これは、マウスを親divから外すことなく、すべてです。私の解釈は少なくとも。 – blackandorangecat

関連する問題