2012-02-17 112 views
2

我的页面上有一个绝对定位的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); 
} 
+0

我的页面出现错误“handleSliderChange未定义”。另外,我不确定“当您在按钮上拖动滑块时”的含义。你能再详细一点吗? – Simon 2012-02-17 08:26:47

+0

嗨西蒙。我上传了一个新副本。 对不起,我的意思是底部而不是按钮。拖动滑块的手柄是为了水平滚动页面,但速度太快。 – 2012-02-17 10:10:49

回答

1

的问题出现在固定滑块的窗口位置和滑盖内部确定多远移动每个滑块的方式进行捆绑处理。

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

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

+0

嗨,西蒙,非常感谢帮助我!我试图让代码工作,但结果是一样的,它仍然滚动得太快! (我已经更新了网站[here](http://djlol.dk/projects/index2.html))。我可能错过了一些简单的东西,你知道它会是什么吗? – 2012-02-20 07:46:10

+0

对不起西蒙,我没有正确测试我的解决方案,所以它是不正确的。我已经弄清楚它是什么。阅读我的新答案。 – Simon 2012-02-20 18:40:20