使用滑块滚动页面

Question

我在我的页面上有一个绝对定位的jQuery滑块。有了它，我希望能够点击并拖动来滚动页面。

你现在可以在这里看到它：

http://djlol.dk/projects/index2.html (底部的白色那个)

当您拖动按钮上的滑块时，页面会奇怪地跳转。它可以滚动，但速度太快了。

我是这样做的：

$("#slider").slider({
  animate: true,
  change: handleSliderChange,
  slide: handleSliderSlide,
  min: 0,
  max:2900
});

function handleSliderSlide(e, ui)
{
  window.scroll(ui.value, 0);
}

Answer 1

问题似乎与您在窗口中固定滑块的位置以及滑块内部确定每个滑块手柄的移动距离的方式有关。

在每次鼠标移动事件中，滑块插件都会根据鼠标位置的变化来计算滑动处理程序的新位置以及元素的左偏移。滑块元素使用css属性position:fixed，当浏览器窗口滚动时，元素的左偏移量会增加，以便将其保持在固定位置。因此，当您滚动窗口时，不仅滑块值会随着鼠标的改变而增加，而且会增加左偏移量。结果是一个快速移动的滑块。

要解决此问题，请将滑块元素位置更改为相对，并调整顶部和左侧偏移。但是，这意味着当窗口滚动时，滑块的左端将滚动出视图，但至少您的滑块会以正常的速度移动。