translate3d 模拟下拉框

Question

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

Answer 1

该回答引用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)";
});