0

我正在尝试创建一个页面内查看器，它可以滚动浏览 3 个面板，从中间面板开始作为默认值，允许用户从中间面板向左滚动或向右滚动。

我正在使用 jQuery 和 scrollTo 在面板之间切换，但我不知道如何偏移面板，因此默认情况下会显示中间的面板。我尝试使滚动面板容器的位置相对并设置“right：500px;”。这会在查看器中正确定位中间面板，但不使用 jQuery 清除“right: 500px”的位置，插件不会滚动到最左边的面板。

下面是 HTML。我希望我可以使用 CSS 而不是 JavaScript 设置中间面板的默认位置？有没有办法做到这一点？或者有没有办法配置 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>
4

1 回答 1

0

你可以使用 scrollLeft() 

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

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

于 2013-06-13T15:07:49.340 回答