我正在尝试创建一个页内查看器，它可以滚动浏览 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>
最佳答案
关于jquery - 3 panel scrollto 窗口左右滚动但从中间开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17090335/