CSS / Javascript使div内的滚动条

Question

I have this custom scrollbar on my final project that i'm doing in school and the divs have a border radius of 15px, and when I put the custom scrollbar with the border radius of 15px, the scrollbar goes over the div which doesn't make it look as nice as I want it

How Can I put it inside the div so that edge won't show?

A little code of the 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

Without any code the best I could offer would be experimenting with z-indexes between the two elements. Perhaps the element with the scrollbar could sit under the containing element and hide the piece that sticks out.

Also, don't forget to put the position property on the element with z-index.

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

Answer 2

One way would be to wrap the element in another div that has some padding:

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