3-х панельное окно прокрутки, которое прокручивается влево и вправо, но начинается посередине
Я пытаюсь создать просмотрщик страниц, который может прокручивать 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>