js 上下拖动效果【代码示例】

1、在网页中实现上下拖动效果，可以使用JavaScript来操作DOM元素的scrollTop属性来实现。我们需要获取需要滚动的元素，可以通过getElementById等方法来获取。然后，我们可以通过给该元素绑定鼠标按下、移动和松开事件来实现拖动效果。

示例代码如下：

// 获取需要滚动的元素
var scrollElement = document.getElementById("scrollElement");
// 定义变量，记录鼠标按下时的初始位置
var startY;
// 绑定鼠标按下事件
scrollElement.addEventListener("mousedown", function(event) {
  // 记录鼠标按下时的初始位置
  startY = event.clientY;
});
// 绑定鼠标移动事件
scrollElement.addEventListener("mousemove", function(event) {
  // 计算鼠标移动的距离
  var distanceY = event.clientY - startY;
  // 将滚动元素的scrollTop属性加上移动距离，实现上下滚动效果
  scrollElement.scrollTop += distanceY;
  // 更新鼠标按下时的初始位置
  startY = event.clientY;
});
// 绑定鼠标松开事件
scrollElement.addEventListener("mouseup", function(event) {
  // 清空初始位置
  startY = null;
});

以上代码实现了当鼠标按下并移动时，根据鼠标移动的距离来改变滚动元素的scrollTop属性，从而实现了上下拖动的效果。