我的問題實際上是關于定位固定元素的滾動條 我試著通過設置一些左邊界來嘲弄:50% bgColor;等等...但是這并沒有太大的幫助,因為我已經修改了我的主固定div,一個包含在我的半徑中的邊界半徑
更清楚地說,這是我試圖得到的設計
我可以通過創建另一個元素并將其滾動位置設置為與我的主框相同來模仿它,但我更喜歡CSS解決方案
# # #用css樣式化滾動條并添加一個負邊距。起點:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: lightgray;
font-family: sans-serif;
}
.filter {
position: fixed;
top: 12px;
left: 12px;
width: min(280px, calc(100% - 2 * 12px));
height: min(320px, calc(100% - 2 * 12px));
border-radius: 12px;
background-color: #f2f2f2;
display: flex;
flex-direction: column;
}
.filter:after {
content: '';
position: absolute;
inset: auto 0 0;
height: 12px;
background-image: linear-gradient(to top, #f2f2f2, transparent);
pointer-events: none;
border-radius: 0 0 12px 12px;
}
.filter-head {
padding: 12px;
position: relative;
border-bottom: solid 1px #999;
flex: none;
}
.filter-head:after {
content: '';
position: absolute;
inset: calc(100% + 1px) 0 auto;
height: 12px;
background-image: linear-gradient(to bottom, #f2f2f2, transparent);
pointer-events: none;
}
.filter-body {
overflow-y: auto;
min-height: 1px;
margin-right: -20px;
padding: 12px 24px 12px 12px;
}
.filter-body::-webkit-scrollbar {
width: 20px;
border-radius: 40px;
}
.filter-body::-webkit-scrollbar-track {
background-color: #f2f2f2;
border-radius: 40px;
border: solid 8px transparent;
background-clip: padding-box;
}
.filter-body::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 40px;
border: solid 8px transparent;
background-clip: padding-box;
}
<section class="filter">
<header class="filter-head">
<h4>Filter</h4>
</header>
<div class="filter-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, reprehenderit amet molestias iusto sequi velit architecto eveniet maxime distinctio non enim eaque beatae alias placeat aliquam recusandae autem voluptatem mollitia qui nemo. Vitae, unde, animi, repellat voluptates aut ex quae nam quisquam totam nulla autem sunt labore quas voluptatibus hic id odit fuga aliquam modi expedita fugit incidunt officia. Dicta, minus, impedit veniam doloremque quaerat accusantium laborum praesentium repellat. Quod quibusdam in corporis deleniti. Iusto, beatae recusandae animi dicta facere.
</div>
</section>
# # #要使用overflow: scroll定位固定元素的滾動條,可以使用CSS指定尺寸并將position屬性設置為fixed。
上一篇python 新年快樂
下一篇vue多出口文件