gpt4 book ai didi

javascript - CSS/Javascript 在 div 内制作滚动条

转载 作者:行者123 更新时间:2023-11-28 04:43:20 26 4
gpt4 key购买 nike

我在学校做的最后一个元素中有这个自定义滚动条,div的边框半径为15px,当我放置边框半径为15px的自定义滚动条时,滚动条会越过div,并没有使它看起来像我想要的那么好

enter image description here

如何将它放在 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);
}

最佳答案

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

关于javascript - CSS/Javascript 在 div 内制作滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43598560/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com