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>