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-index。 也許帶有滾動條的元素可以位於包含元素下面並隱藏突出的部分。

另外，不要忘記將position屬性放在具有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>