javascript - 使 slider 滚动页面

Question

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

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

http://djlol.dk/projects/index2.html (最下面那个白色的)

当你拖动按钮处的 slider 时，页面会奇怪地跳动。它会滚动，但速度太快了。

我是这样做的:

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

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

Answer 1

问题似乎与固定 slider 在窗口中的位置以及 slider 在内部确定每个 slider handle 移动多远的方式有关。

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

要解决此问题，请将 slider 元素位置更改为相对位置并调整顶部和左侧偏移量。然而，这将意味着 slider 的左端将在窗口滚动时滚出 View ，但至少您的 slider 以正常速度移动。