왼쪽 및 오른쪽으로 스크롤되지만 가운데에서 시작하는 3 개의 패널 스크롤 창

중간 패널에서 시작하여 3 개의 패널을 스크롤 할 수있는 인 페이지 뷰어를 만들려고합니다 (사용자가 왼쪽으로 스크롤 할 수 있도록 허용). 또는 가운데 패널에서 오른쪽으로 스크롤하십시오.왼쪽 및 오른쪽으로 스크롤되지만 가운데에서 시작하는 3 개의 패널 스크롤 창

패널간에 전환하려면 jQuery와 scrollTo를 사용하고 있지만 중간에있는 패널이 기본적으로 표시되도록 패널을 오프셋하는 방법을 알 수는 없습니다. 스크롤 패널 컨테이너의 위치를 상대적으로 설정하고 "right : 500px;"로 설정하려고했습니다. 이렇게하면 중간 패널이 뷰어에 올바르게 배치되지만 jQuery를 사용하지 않고 "right : 500px"의 위치를 지우지 않으면 플러그인이 가장 왼쪽 패널로 스크롤하지 않습니다.

아래는 HTML입니다. 자바 스크립트 대신 CSS를 사용하여 중간 패널의 기본 위치를 설정할 수 있기를 바랍니다. 그렇게 할 수있는 방법이 있습니까? 또는 중간 패널을 표시하도록 기본 위치를 설정하도록 scrollTo를 구성하는 방법이 있습니까?

<html> 
    <head> 
    <style> 
     h1 { 
     color: red; 
     } 
     .list { 
     overflow: hidden; 
     display: block; 
     width: 500px; 
     float: left; 
     } 
     .list-canvas { 
     position: relative; 
     width: 1800px; 
     float: left; 
     display: inline-block; 
     } 
     .list-canvas .screen { 
     width: 500px; 
     float: left; 
     } 
     .green { 
     border: 1px solid green; 
     background-color: green; 
     } 
     .red { 
     border: 1px solid red; 
     background-color: red; 
     } 
     .blue { 
     border: 1px solid blue; 
     background-color: blue; 
     } 
     .purple { 
     border: 3px solid purple; 
     background-color: purple; 
     } 

    </style> 
    </head> 
    <body> 
    <h1>Testing 3 panel scroll to starting in the middle and being able to scroll-left and scroll-right</h1> 
    <br> 
    Here is a sample of the 3 panels in their container 
    <br> 
    <br> 
    <br> 
    <div class="list-canvas"> 
     <div class="screen blue"> 
     I am a summary screen 
     </div> 
     <div class="screen red"> 
     I am a list 
     </div> 
     <div class="screen green"> 
     I am an info screen 
     </div> 
    </div> 
    <br> 
    <br> 
    <br> 
    <br> 
    Here are the three panes in the viewable area - want to be able to scroll left/right using scrollto but don't know how to figure out how to 
    start in the middle and still have scrollto scroll left when "right" is set to position the list-canvas to show the middle frame. How do I properly set the offset to make the middle pane the default, and still have scrollto work? 
    <br> 
    <br> 
    <br> 
    <div class="list purple"> 
     <div class="list-canvas" style="right: 500px;"> 
     <div class="screen blue"> 
      I am a summary screen 
     </div> 
     <div class="screen red"> 
      I am a list 
     </div> 
     <div class="screen green"> 
      I am an info screen 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

출처

2013-06-13 aressidi

당신은()의 응답

$("body").scrollLeft(500);

http://jsfiddle.net/PtzQ8/1/

출처

2013-06-13 15:07:49

안녕 아브라함, 감사 scrollLeft에 사용할 수 있습니다. body 태그에서 처리 할 수 없습니다. 그 위치를 바꾸는 페이지에 더 많은 것이 있습니다. 오른쪽으로 설정할 때 .scrollLeft가 작동하면 500px 스타일의 .list-canvas가 다음과 같이 될 수 있습니다. $ (". list-canvas"). scrollLeft (500); 그러나 당신은 여기에 요점에서 볼 수 없습니다. 뷰어의 빨간색 상자가 아니라 파란색 상자가 표시되어야합니다. http://jsfiddle.net/PtzQ8/2/ – aressidi

jsfiddle에서 scrollTo를 추가하여 작동 방법을 살펴볼 수 있습니까? –

왼쪽 및 오른쪽으로 스크롤되지만 가운데에서 시작하는 3 개의 패널 스크롤 창

답변

관련 문제