CSS/Javascript div内にスクロールバーを作成

Question

最終的なプロジェクトで私はこのカスタムスクロールバーを持っています。私は学校でやっていて、divには15pxのボーダー半径があり、15pxのボーダー半径を持つカスタムスクロールバーを置くと、スクロールバーが、それは私がそれエッジが表示されないように、私はdivの中に置くことができますどのように

好きな素敵に見えるようにしないのdivの上に行きますか？

CSSの少しコード：

#ruv_results, #stod2_results,#stod2bio_results, #stod3_results{ 
    text-align:center; 


    } 

.ruv_title_css, .stod2_title_css,.stod2bio_title_css, .stod3_title_css{ 
    font-size:20px; 
    color:#ffffff; 
    border:1px solid #000000; 
    border-radius:15px; 
    margin-top:25px; 
    width:450px; 
    height:550px; 
    display:inline-block; 
    vertical-align:top; 
    box-shadow: 0 0 20px #000; 
    background:#5e5e5e; 
    box-shadow: inset 0 0 20px #000000; 
    padding-right:4px; 
    padding-left:4px; 
    margin-bottom:10px; 
    margin-right:6px; 
    margin-left:6px; 

} 


::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 15px; 
    height:90%; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 15px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

Answer 1

私が提供できる最高のは、2つの要素間のzインデックスを使って実験することであろう任意のコードなし。おそらく、スクロールバーを持つ要素が、包含要素の下に座って、出てくる部分を隠すかもしれません。

また、z-indexを持つ要素にpositionプロパティを設定することを忘れないでください。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index?v=example

Answer 2

一つの方法は、いくつかのパディングを持つ別のdiv内の要素をラップすることです：うーん、私のために動作していないよう

.outer { 
 
    background-color: #eee; 
 
    box-shadow: inset 0 0 10px #ddd; 
 
    border-radius: 15px; 
 
    padding: 1em; 
 
} 
 

 
.inner { 
 
    max-height: 200px; 
 
    overflow: scroll; 
 
} 
 

 
/* Custom Scrollbar */ 
 
::-webkit-scrollbar { 
 
    width: 12px; 
 
} 
 

 
::-webkit-scrollbar-track { 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
    border-radius: 15px; 
 
    height:90%; 
 
} 
 

 
::-webkit-scrollbar-thumb { 
 
    border-radius: 15px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 
} 
 

 
body { 
 
    overflow: hidden; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a iaculis enim. Fusce pellentesque mauris vitae urna sodales gravida. Pellentesque pharetra est sit amet sodales faucibus. Mauris ultrices scelerisque feugiat. Duis magna arcu, condimentum at nunc ac, aliquet congue mauris. Curabitur feugiat urna rutrum urna porttitor, facilisis lacinia nisl facilisis. Nulla porttitor, neque id varius tincidunt, nibh lectus ornare mauris, eget consectetur elit lectus quis magna. Sed fringilla semper est eu imperdiet. Phasellus accumsan orci vitae quam hendrerit venenatis. Sed rhoncus nulla non enim euismod, a pretium nisi feugiat. 
 

 
    In blandit augue gravida, viverra quam vitae, malesuada sem. In mollis ante non felis accumsan ullamcorper. Cras egestas, mi ut varius elementum, libero libero ultricies nulla, vel suscipit nisi dolor vel massa. Sed non nunc nibh. Vivamus eu libero gravida, interdum justo eu, facilisis ipsum. Pellentesque accumsan justo nec odio vestibulum iaculis. Maecenas ac turpis nisi. Nullam pharetra eros at tellus convallis, sed ornare orci egestas. 
 
    </div> 
 
</div>