2014-12-03 1 views
0

ScrollTo jquery 플러그인을 사용하여 뷰포트의 전체 높이와 하나에서 다른 곳으로 스크롤하기위한 버튼이있는 두 개의 div가 있습니다. 문제는 수동 스크롤의 가능성을 방지하기 위해서입니다.스크롤 할 때 요소 단위로 점프하기

다른 사용자가 마우스를 아래로 스크롤하면 브라우저가 자동으로 두 번째보기로 스크롤하고 맨 위로 스크롤하면 이전보기가 표시됩니다. 여기 잘 예를 들어 설명했는지 모르겠

:이 웹 페이지에서 스크롤 http://orangina.eu/heritage

시도, 이것은 내가 필요로하는 것입니다.

감사합니다.

+4

* "문제는 수동 스크롤의 확실성을 방지하기 위해서입니다."* ** 왜 **? 그들이 정상적인 것을하려고 할 때 이상한 행동으로 방문자를 깜짝 놀라게하는 이유는 무엇입니까? 사람들은 항상 X를하고 Y를 얻고 대신 Z를 얻는 것을 좋아하지 않습니다. –

+0

개념적으로 수직 html 슬라이더입니다. flexbox – Roi

+0

@ T.J.Crowder이 기술은 Apple 사이트, Facebook, Tumblr, Flickr, Sony 등의 회사에서 사용되었습니다. 어떤 경우에는 UX의 관점에서 그렇게 나쁘지는 않은 것 같습니다. 그 기술의 좋고 나쁜 용도가 있지만 좋은 것들을 잊을 수는 없습니다. – Alvaro

답변

0

답장을 보내 주셔서 감사합니다.

표준 스크롤을 사용하는 대신 translateY CSS 속성을 사용하여 문제를 해결했습니다. 각 페이지 레이어에 데이터 ID를 설정하고 아래로 스크롤 할 때마다 translateY (100 %, 200 %, 300 % ...)를 수행합니다.

1

내가 틀렸다면 정정 해주십시오.하지만 브라우저의 기본 스크롤 동작을 비활성화하고, 위쪽으로 스크롤하고 아래로 스크롤하고 페이지 높이의 높이까지 스크롤 할 이벤트를 첨부하려고합니다.

이 방법은 브라우저의 기본 스크롤 동작을 본체 및 HTML에 overflow:hidden으로 사용하지 않도록 설정하는 것입니다.

는 그런 다음 아래 위로 스크롤 다른 스크롤 또는은 "event.originalEvent.detail> 0"또는 "e.originalEvent.wheelDelta < 0"검사 사업부에 "마우스 휠"와 "DOMMouseScroll"는 jQuery를 바인딩 할 수 있습니다.

마지막으로 downscroll 또는 upscroll에 따라 if 또는 else 함수 호출을 추가하십시오.

원한다면 코드를 작성할 수 있지만 직접 해보면 더 많은 도움이 될 것입니다.

+1

이것은 좋은 대답입니다. – superUntitled

+0

예! 당신이 올바른지. 문제는 내가 overflow : hidden을 넣고 특정 div id (현재 scrollTo jQuery 플러그인을 사용하고 있습니다)로 스크롤하려고하면 페이지가 움직이지 않는다는 것입니다. 오버플로를 넣으면 : 숨겨진 내가 원하는 div로 어떻게 이동할 수 있습니까? – Yast

+0

div를 변경하기 위해 클릭 할 버튼이있는 경우 $ ("....")를 간단히 수행 할 수 있습니다.if 및 else 조건 내에서 버튼 클릭을 시뮬레이트하려면()을 클릭하십시오. 또한 스크롤을 위 또는 아래로 움직여 페이지를 감지하고 위아래로 움직일 수있는 코드를 작성해야합니다. – gothical

0

fullPage.js jQuery 용 플러그인을 사용하면 동일한 효과를 얻을 수 있습니다. 같은 성능을 옵션, 콜백 및 방법의

  • 많은 개선
  • CSS3 애니메이션 호환 IE 8
  • 터치 장치와 같은 오래된 브라우저와 호환

    • .
  • 관련 문제