translate3d 模拟下拉框

有没有人用过translate3d来模拟滚动条?目前找了几个例子,但是,都是一些复制粘贴的。毫无作用。

该回答引用ChatGPT
通过JS或CSS来控制translate3d的值,实现滚动条的效果。例如,在CSS中可以使用如下代码:

#scrollable-element {
  height: 200px;
  overflow: hidden;
}

#scrollable-content {
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s ease-out;
}

在JS中,您可以使用以下代码来控制translate3d的值:

var scrollableElement = document.getElementById("scrollable-element");
var scrollableContent = document.getElementById("scrollable-content");

scrollableElement.addEventListener("scroll", function() {
  var y = scrollableElement.scrollTop;
  scrollableContent.style.transform = "translate3d(0, -" + y + "px, 0)";
});