슬라이더 만들기 페이지 스크롤

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 오프셋으로부터 슬라이드 핸들러의 새 위치를 계산합니다. 슬라이더 요소는 CSS 속성 position:fixed을 사용하며 브라우저 윈도우가 스크롤 될 때 효율적으로 요소의 왼쪽 오프셋이 증가하여 고정 된 위치에 유지됩니다. 마우스를 움직이면 슬라이더 값이 증가 할뿐만 아니라 윈도우를 스크롤 할 때 LEFT 오프셋도 증가합니다. 결과는 빠르게 움직이는 슬라이더입니다.

이 문제를 해결하려면 슬라이더 요소 위치를 상대적으로 변경하고 위쪽 및 왼쪽 오프셋을 조정하십시오. 그러나 이것은 윈도우가 스크롤 될 때 슬라이더의 왼쪽 끝이 보이지 않게 스크롤되지만 적어도 슬라이더는 보통 속도로 움직이는 것을 의미합니다.