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

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

滑块插件在鼠标移动事件中计算滑块处理程序的新位置，从鼠标位置更改以及元素的LEFT偏移量开始计算。您的slider元素使用css属性position:fixed，并且在滚动浏览器窗口时有效，元素的LEFT偏移量会增加，以便将其保持在固定位置。因此，当您滚动窗口时，不仅滑块值会因鼠标更改而增加，还会因左移偏移而增加。结果是一个快速移动的滑块。

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

制作滑块滚动页面

1 个答案: