javascript - 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

一种方法是将元素包装在另一个具有一些填充的 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>