0

デフォルトとして中央のパネルから始まる3つのパネルをスクロールできるページ内ビューアを作成しようとしています。これにより、ユーザーは中央のパネルから左または右にスクロールできます。

jQueryとscrollToを使用してパネルを切り替えていますが、パネルをオフセットする方法がわからないため、デフォルトで中央に表示されます。スクロール パネル コンテナーの位置を相対的にして、「right: 500px;」を設定してみました。これにより、中央のパネルがビューアに正しく配置されますが、jQuery を使用して「right: 500px」の位置をクリアしないと、プラグインは一番左のパネルにスクロールしません。

以下はHTMLです。JavaScript の代わりに 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>
4

1 に答える 1