가로 스크롤 막대에 세로 스크롤 추가

Question

저는 이런 식으로 많은 노력을 기울였으며 가짜 스크롤 막대와 DOM 트릭 코드에서 다양한 방법을 시도했습니다. 아무것도 내가 필요로하는 것처럼 깨끗하고 기능적으로 보이지 않습니다.

내가하고자하는 것은 가로로 스크롤되는 div (스크롤바 포함)와 그 안에 중첩 된 세로로 스크롤되는 div가있는 것입니다. 하나의 가로 스크롤 막대가 스크롤되고 특정 지점 다음에 수직으로 "go-up"div를 스크롤하는 것이 이상적입니다. 기본적으로 나는 수평 "장면"높이를 동일 오버 플로우를 가질 수 있다고 생각하고

을 : 내가 일할 수있는 해결책을 가지고 생각 을 : 여기

시각화하기 위해 필요로하는 사람들에 대한 예시도이다 "go-up"div. 그리고 "장면"의 가로 너비가 지나간 후 ​​... onScroll, (ScrollLeft)를 사용하여 "go-up"컨테이너를 오른쪽으로 이동하고 (ScrollTop)을 사용하여 위로 이동할 수 있습니다.

기본적으로 가로 스크롤 막대를 사용하여 세로 스크롤을 제어한다는 착각을 불러 일으 킵니다. http://jsfiddle.net/jPzqj/1/

나는 현재 내가 사용 ...은 "현장"의 끝 부분에 함수를 전달하는 방법을 알고 :

이

$('#main').scroll(function(e) 
    { 
     if($(this).scrollLeft()>1430) 
     { 

     } 
}); 

내 유일한 문제는 여기에 코드를 밖으로

확인 나는 go-up 컨테이너를 옮길 수있는 수학에 어떻게 접근해야하는지 잘 모르겠습니다. 어떻게 "장면"div 스크롤 값을 "go-up"의 ScrollLeft 및 ScrollTop 값으로 전달합니까 ...

아무에게도 이것에 대해 조언을 해 줄 수 있습니까?

감사합니다.

Answer 1

오른쪽 경로에서 이 완전히이고, 수직 스크롤 막대가 없습니다.

그건 좋은 사이트입니다 (30 분 안에 분명하게 만들지는 않습니다). 자바 스크립트는 난독 화되어 있지만 흥미가 있다면, 방화범이 끌리는 곳에서 무슨 일이 일어나는지 알 수 있습니다.

그것은 javascript 도서관, 멋진 CSS3 Transform3D 효과 등을 혼합하여 작동

멋지게 실제로 (최대 스크롤, 이미지 만이 이동하면 화면의 효과를 제공하는 HTML을 공부했다 - 그리고 스크롤하지 - 화면이 항상있는 동안 동일한 Y 위치에 있음).

깊이의 집을 배경에서 앞면보다 느리게 이동하여 동일한 효과가 사용됩니다.

이 효과를 PARALLAX SCROLLING이라고합니다. 당신이 시차 효과를보고 시작할 수

좋은 javascript 라이브러리는, Stellar.js와 특히 Nike 및 Saucony했다 some great sites 좀 걸릴 수 있습니다 Stellar.js

입니다.이 대답은 당신에게 시간을 절약

희망, 공부에

행운)

---

편집이

이 당신이 원하는 무엇인가 : Jquery Parallax Scrolling effect - Multi directional

는 열 바운티 상을받은 대답을 피하고 오른쪽 화살표 키를 계속 누릅니다.