如何使用JavaScript/CSS制作圆形ScrollBox? [英] How to make a circular ScrollBox using JavaScript/CSS?
问题描述
我要重新创建圆形滚动框，如下面的GIF所示，
I want to recreate the circular scrollbox as depicted in the GIF below,
我不认为为什么可以使用css制作圆形滚动框，所以我想到了将padding-left添加到ul的每个子元素中，以使滚动框显示为圆形.
I don't think there is some why if making a circular scrollbox using css is possible so I thought of adding padding-left to each child of the ul to make the scrollbox appear circular.
要实现这一目标，
将0px的填充添加到li-1
将2px的填充添加到li-2
将4px的填充添加到li-3
将6px的填充添加到li-4
将8px的填充添加到li-5
将6px的填充添加到li-6
将4px的填充添加到li-7
将2px的填充添加到li-8
将0px的填充内容添加到li-9
To achieve this,
add padding of 0px to li-1
add padding of 2px to li-2
add padding of 4px to li-3
add padding of 6px to li-4
add padding of 8px to li-5
add padding of 6px to li-6
add padding of 4px to li-7
add padding of 2px to li-8
add padding of 0px to li-9
可以更改为
将0px的填充添加到li-2
将2px的填充添加到li-3
将4px的填充添加到li-4
将6px的填充内容添加到li-5
将8px的填充添加到li-6
将6px的填充内容添加到li-7
将4px的填充添加到li-8
将2px的填充添加到li-9
将0px的填充内容添加到li-10中.等等...
on scroll padding can be changed to
add padding of 0px to li-2
add padding of 2px to li-3
add padding of 4px to li-4
add padding of 6px to li-5
add padding of 8px to li-6
add padding of 6px to li-7
add padding of 4px to li-8
add padding of 2px to li-9
add padding of 0px to li-10 and so on...
我的代码存在的问题是，通过鼠标滚轮滚动滚动框时，滚动框可以正常运行，但是当用户使用滚动标签/滚动按钮时 在滚动条中，填充急剧增加.
Problem with my code is, when the scrollbox is scrolled via mouse scroll-wheel, it acts correctly but when the user uses the scroll-tab/scroll buttons in the scrollbar, padding increases drastically.
到目前为止，我的代码是:
My code so far is:
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>
我确信我在填充和填充方面使问题变得过于复杂了.有没有更简单的方法可以达到这种效果?
I am sure I'm over-complicating the problem with padding and stuff. Is there an easier way of achieving this effect?
推荐答案
这里是一个依赖CSS且仅包含少量JS的解决方案.诀窍是考虑 shape-outside 曲线和JS仅用于调整形状在滚动条上的位置.
Here is a solution that rely on CSS and only few JS. The trick is to consider shape-outside to have the curve and the JS will only be used to adjust the position of the shape on scroll.
这是一种非常简单的方法，但是您需要注意对浏览器的支持( https://caniuse .com/#feat = css-shapes )
It's a very simple method but you need to pay attention to browser support (https://caniuse.com/#feat=css-shapes)
var shape = document.querySelector(".left");
document.querySelector(".circularScrollbox").onscroll=function() {
shape.style.marginTop = this.scrollTop+"px";
};
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;
}
.left {
float: left;
shape-outside: ellipse(50px 85px at 0% calc(100% - 85px));
width: 100px;
height: 100%;
margin-top:0;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
<div class='circularScrollbox'>
<div class="left"></div>
<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>
这篇关于如何使用JavaScript/CSS制作圆形ScrollBox?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
