如何使用 JavaScript/CSS 制作圆形 ScrollBox？答案

【问题标题】：How to make a circular ScrollBox using JavaScript/CSS?如何使用 JavaScript/CSS 制作圆形 ScrollBox？
【发布时间】：2019-03-02 16:58:48
【问题描述】：

我想重新创建如下 GIF 所示的圆形滚动框，

我认为如果使用 css 制作圆形滚动框是可能的，我不认为有什么原因，所以我想将 padding-left 添加到 ul 的每个子元素以使滚动框看起来是圆形的。

为实现这一目标，
将 0px 的填充添加到 li-1
将 2px 的填充添加到 li-2
为 li-3 添加 4px 的内边距
为 li-4 添加 6px 的内边距
为 li-5 添加 8px 的内边距
为 li-6 添加 6px 的内边距
为 li-7 添加 4px 的内边距
为 li-8 添加 2px 的内边距
为 li-9 添加 0px 的内边距

滚动填充可以更改为将 0px 的填充添加到 li-2
将 2px 的填充添加到 li-3
为 li-4 添加 4px 的内边距
为 li-5 添加 6px 的内边距
为 li-6 添加 8px 的内边距
为 li-7 添加 6px 的内边距
为 li-8 添加 4px 的内边距
为 li-9 添加 2px 的内边距
将 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>

我确定我用填充和其他东西过度复杂化了问题。有没有更简单的方法来实现这种效果？

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案1】：

对于列表中的每一项，填充量取决于：

它在框中的位置
框滚动了多少
而且由于是“圆形”的东西，盒子有多大

使用 jQuery，$item.offset().top 为您提供页面上项目的 Y 位置。
这包括滚动，因此该值会随着框的滚动而下降。

现在$item.offset().top - $box.offset().top 的位置相对于框的顶部。
如果您已滚动框以使第 23 项位于顶部，则其值为 0，而位于底部（但仍可见）的任何项的值将是框的高度。

所以除以高度：($item.offset().top - $box.offset().top) / $box.height()

每个（可见）项目现在都有一个介于 0 和 1 之间的值，告诉您它当前是位于框的顶部、底部还是介于两者之间！

然后您可以像这样使用三角函数：Math.sin(value*Math.PI) * maxPadding

Working example

【讨论】：

嗨@jean-alphonse，我们可以重复这个菜单项吗？

【解决方案2】：

这是一个依赖 CSS 而只有少数 JS 的解决方案。诀窍是考虑shape-outside 有曲线，JS 只会用于调整滚动形状的位置。

这个方法很简单但是需要注意浏览器支持(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>

【讨论】：

伟大的创新解决方案！我从未想过以这种方式使用 CSS 形状。然而，真的没有必要使用 jQuery：使用 vanilla JS 可以轻松绑定滚动事件侦听器 :)
@Terry 是的，我懒得做纯 JS，现在是周末 :p .. 稍后会更新 ;)