我想重新创建下面 GIF 中描述的圆形滚动框，
我不认为有什么原因可以使用 css 制作圆形滚动框，所以我考虑将 padding-left 添加到 ul 的每个子级到使滚动框显示为圆形。
为了实现这一目标，
给 li-1 添加 0px 的 padding
给 li-2 添加 2px 的 padding
给 li-3 添加 4px 的 padding
给 li-4 添加 6px 的 padding
给 li-5 添加 8px 的 padding
给 li-6 添加 6px 的 padding
给 li-7 添加 4px 的 padding
给 li-8 添加 2px 的 padding
给 li-9 添加 0px 的 padding
滚动填充可以更改为
给 li-2 添加 0px 的 padding
给 li-3 添加 2px 的 padding
给 li-4 添加 4px 的 padding
给 li-5 添加 6px 的 padding
给 li-6 添加 8px 的 padding
给 li-7 添加 6px 的 padding
给 li-8 添加 4px 的 padding
给 li-9 添加 2px 的 padding
将 0px 的填充添加到 li-10 等等...
我的代码的问题是，当通过鼠标滚轮滚动滚动框时，它会正确运行，但是当用户使用滚动标签/滚动按钮时 在滚动条中，填充急剧增加。
到目前为止我的代码是:
var scrollBox = $(".circularScrollbox"),
num = $(".scrollboxList li").length,
vjListItem = $(".vjListItem"),
max = num * 3,
padding = 0,
currentPadding = padding,
scrollPos = scrollBox.scrollTop();
scrollBox.scroll(function() {
if (scrollPos < scrollBox.scrollTop() && currentPadding < max) {
currentPadding += 2;
vjListItem.css("padding", "0 0 0 " + currentPadding + "px");
} else if (scrollPos > scrollBox.scrollTop() && currentPadding > padding) {
currentPadding -= 2;
vjListItem.css("padding", "0 0 0 " + currentPadding + "px");
}
if (scrollBox.scrollTop() == 0) vjListItem.css("padding", padding + "px");
scrollPos = scrollBox.scrollTop();
});body {
display: flex;
flex-direction: column;
height: 95vh;
justify-content: center;
align-items: center;
background: #222;
color: #eee;
font-family: 'Ubuntu Mono', monospace;
}
.circularScrollbox {
width: 200px;
height: 10.6em;
padding: 0 2em;
overflow-Y: scroll;
background: #161616;
border: 2px solid aqua;
}
.circularScrollbox>ol {
list-style-type: none;
padding-left: 0;
}<head>
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class='circularScrollbox'>
<ol class='scrollboxList'>
<li class="vjListItem">Item 01</li>
<li class="vjListItem">Item 02</li>
<li class="vjListItem">Item 03</li>
<li class="vjListItem">Item 04</li>
<li class="vjListItem">Item 05</li>
<li class="vjListItem">Item 06</li>
<li class="vjListItem">Item 07</li>
<li class="vjListItem">Item 08</li>
<li class="vjListItem">Item 09</li>
<li class="vjListItem">Item 10</li>
<li class="vjListItem">Item 11</li>
<li class="vjListItem">Item 12</li>
<li class="vjListItem">Item 13</li>
<li class="vjListItem">Item 14</li>
<li class="vjListItem">Item 15</li>
<li class="vjListItem">Item 16</li>
<li class="vjListItem">Item 17</li>
<li class="vjListItem">Item 18</li>
<li class="vjListItem">Item 19</li>
<li class="vjListItem">Item 20</li>
<li class="vjListItem">Item 21</li>
<li class="vjListItem">Item 22</li>
<li class="vjListItem">Item 23</li>
<li class="vjListItem">Item 24</li>
<li class="vjListItem">Item 25</li>
<li class="vjListItem">Item 26</li>
<li class="vjListItem">Item 27</li>
<li class="vjListItem">Item 28</li>
<li class="vjListItem">Item 29</li>
<li class="vjListItem">Item 30</li>
<li class="vjListItem">Item 31</li>
<li class="vjListItem">Item 32</li>
<li class="vjListItem">Item 33</li>
<li class="vjListItem">Item 34</li>
<li class="vjListItem">Item 35</li>
<li class="vjListItem">Item 36</li>
<li class="vjListItem">Item 37</li>
<li class="vjListItem">Item 38</li>
<li class="vjListItem">Item 39</li>
<li class="vjListItem">Item 40</li>
</ol>
</div>
</body>我确信我用填充和其他东西使问题过于复杂。有没有更简单的方法来实现这种效果？
最佳答案
对于列表中的每一项，填充量取决于:
- 它在盒子里的位置
- 盒子滚动了多少
- 而且因为“圆形”的东西，盒子有多大
使用 jQuery，$item.offset().top 为您提供页面上元素的 Y 位置。
这包括滚动，因此值会随着框的滚动而下降。
现在 $item.offset().top - $box.offset().top 相对于盒子顶部的位置。
如果您滚动框使第 23 项位于顶部，则其值将为 0，而位于底部(但仍然可见)的任何项的值将是框的高度。
所以除以高度:($item.offset().top - $box.offset().top)/$box.height()
每个(可见的)元素现在都有一个介于 0 和 1 之间的值，告诉您它当前是在框的顶部、底部还是介于两者之间的某个位置!
然后您可以像这样使用三 Angular 函数:Math.sin(value*Math.PI) * maxPadding
关于javascript - 如何使用 JavaScript/CSS 制作一个圆形的 ScrollBox？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54960845/