如何在 JS/HTML/CSS 中为 Web 应用程序创建日期选择器滚轮？

Question

我的目标

我正在尝试实现这个滚轮/鼓声/ios 日期选择器样式元素。它将放置在顶部并切换整个页面，加载特定日期的内容。页面本身是可滚动的，但是我还希望日期选择器轮可滚动和可拖动，以便它适用于桌面和移动设备：

我发现了什么

以下是我正在寻找的功能的一些很好的示例：

• https://demo.mobiscroll.com/fullscreen/datetime/mobile-desktop-usage（被付费专区屏蔽，而且元素本身也不是很可定制）
• https://www.plus-one.tech/vue-drumroll-datetime-picker/（这个使用Vue.js）

显然，这个想法是只有一列，将日期元素隔开，然后水平翻转它，如上图所示。这些是我发现在桌面和移动设备上都可以使用的唯一有效示例。

我尝试过的

我遇到的所有其他示例都使用框架或仅针对 iOS/Android 构建。我尝试通过修改在 JSFiddle 上找到的轮播来复制效果：https://jsfiddle.net/T0RR1N/udxafzm1/2/

我修改了这个 JS 部分来检测滚动，然后更改轮播幻灯片：

  window.onwheel = e => {
    if(e.deltaY >= 0){
      // Scrolling Down with mouse
      next();
    } else {
      // Scrolling Up with mouse
      prev();
    }
  }

我认为这是正确的方法，但是这种方法有几个缺陷：

1. 如果滚动速度太快，元素滚动机制就会中断
2. 列表元素如果超出屏幕就会被删除
3. 轮播不会从现有元素列表中提取

我的问题

仅使用 JS、HTML 和 CSS 实现此功能的最佳方法是什么？

非常感谢任何帮助，感谢您的阅读！

Answer 1

对于捕捉到中心的元素，并使用它来检测捕捉的元素。

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

使用 javascript 为捕捉元素周围的元素设置附加类。

很快就会有一个选择器来使这变得更容易。

Answer 2

你可以做这样的事情，基本思想是设置一个带有一堆子div的div并将溢出设置为隐藏，然后将鼠标向上/向下和鼠标移动事件附加到div并根据是否向上移动设置顶部或向下。我没有添加边界检查或任何样式。你还必须调整滚动速度，现在我将其设置为 1px。

<div style="height:100px;overflow:hidden;position:relative" id="carousel">
<div style="position:relative">op 1</div>
<div style="position:relative">op 2</div>
<div style="position:relative">op 3</div>
<div style="position:relative">op 4</div>
<div style="position:relative">op 5</div>
<div style="position:relative">op 6</div>
<div style="position:relative">op 7</div>
<div style="position:relative">op 8</div>
<div style="position:relative">op 9</div>
<div style="position:relative">op 10</div>
</div>

<script>

let dragged;
let mouseDown = false;

document.addEventListener("mousedown", (event) => {
    mouseDown = true;
});

document.addEventListener("mouseup", (event) => {
    mouseDown = false;
});

document.getElementById("carousel").addEventListener("mousemove", (event) => {
event.preventDefault();
if(mouseDown)
{
// store a ref. on the dragged elem
  dragged = event.target.parentNode.querySelectorAll("div");

  for (const node of dragged) {
  let position = parseFloat(node.style.top || 0);
  if(event.movementY > 0)
{  
    position = position - 1 + "px";
}
else{
    position = position + 1 + "px";
}
    node.style.top = position;
}
  }
});
</script>