スクロール可能なタグ内のスクロールを隠す

Question

divの一部をスクロールし、他の部分のスクロールを無視する必要があります。

私の例では、青と緑をスクロールする必要がありますが、その場所に赤を残しておきたいと思います。

JSFiddle

<div style="width: 100px; 
 
    height:200px; 
 
    border: solid black 1px; 
 
    overflow-x: auto"> 
 
    <div style="width: 120px; height: 50px;background-color:blue"> 
 
    </div> 
 
    <div style="width: 100px; height: 30px;background-color:red"> 
 
    </div> 
 
    <div style="width: 120px; height: 50px;background-color:green"> 
 
    </div> 
 
</div>

誰もが私の問題を解決するためにどのようなアイデアを持っていますか？

Answer 1

あなたはposition: fixedを使用することができます。

#wrapper { 
 
    width: 100px; 
 
    height:200px; 
 
    border: solid black 1px; 
 
    overflow-x: auto; 
 
} 
 

 
#blue { 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color:blue; 
 
} 
 

 
#red { 
 
    width: 100px; 
 
    height: 30px; 
 
    background-color:red; 
 
    position: fixed; 
 
} 
 

 
#green { 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color:green; 
 
}

<div id="wrapper"> 
 
    <div id="blue"></div> 
 
    <div id="red"></div> 
 
    <div id="green"></div> 
 
</div>

Answer 2

このchange.Itは私のために働いてください：

<div style="width: 100px; height:200px; border: solid black 1px;overflow-x: auto"> 
    <div style="width: 120px; height: 50px;background-color:blue"> 
    </div> 
    <div style="width: 100px; height: 30px;background-color:red;position:fixed;"> 
    </div> 
    <div style="width: 120px; height: 50px;background-color:green"> 
    </div> 
    </div> 

が、これはあなたが望むものであると思います。