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

沒有任何代碼，我可以提供最好將與這兩個元件之間的z索引來進行實驗。也許帶有滾動條的元素可以位於包含元素下方並隱藏伸出的部分。

另外，不要忘記用z-index將元素的位置屬性。

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>