CODEWITHSUNDEEP
javascriptjqueryhtmlscrollslider
Simon Fredsted
Simon Fredsted

Reputation: 976

Making a slider scroll the page

I have an absolute positioned jQuery slider on my page. With it, I want to be able to click and drag to scroll the page.

You can see it right now here:

http://djlol.dk/projects/index2.html (The white one at the bottom)

When you drag the slider at the button, the page jumps strangely. It scrolls, but it's way too fast.

I'm doing it this way: 

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

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

Upvotes: 2

Views: 981

Answers (1)

Simon
Simon

Reputation: 1754

The problem appears to be tied up in your fixing the position of the slider in the window and the way the slider internally determines how far to move each slider handle.

The slider plugin calculates the new position of the slide handler from the mouses position change and also the LEFT offset of the element, on each mouse move event. Your slider element uses the css property position:fixed and effectively as the browser window is scrolled, the LEFT offset of the element increases in order to keep it in a fixed position. So not only is the slider value being increased by the mouse change but also by the LEFT offset as you scroll the window. The result is a fast moving slider.

To fix this, change your slider element position to relative and adjust your top and left offsets. However, this will mean that the left end of the slider will scroll out of view as the window is scrolled, but at least your slider moves at a normal pace.

Upvotes: 1

Related Questions