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

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

我不认为如果使用css制作圆形滚动框是有可能的,所以我想为ul的每个子节点添加padding-left以使滚动框显示为圆形.

为达到这个,
向li-1添加0px的填充
向li-2添加2px的填充
添加4px的填充到li-3
添加6px的填充到li-4
在li-5中添加8px的填充
添加6px的填充到li-6
添加4px的填充到li-7
在li-8中添加2px的填充
添加0px的填充到li-9

滚动填充可以更改为
向li-2添加0px的填充
添加2px的填充到li-3
添加4px的填充到li-4
添加6px的填充到li-5
向li-6添加8px的填充
添加6px的填充到li-7
添加4px的填充到li-8
在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;
}


我确信我的填充和填充问题过于复杂.有没有更简单的方法来实现这种效果？


最佳答案
这是一个依赖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;
}


 原文链接：https://www.f2er.com/html/426290.html

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

猜你在找的HTML相关文章