Jquery 3个向左滚动和向右滚动但中间开始的面板滚动窗口
我正在尝试创建一个页面内查看器，它可以从中间面板开始滚动3个面板作为默认面板，允许用户从中间面板向左或向右滚动 我使用jQuery和ScRelto在面板之间切换，但我无法确定如何抵消面板，默认情况下中间显示的面板。我已经尝试将滚动面板容器的位置设置为相对位置，并设置为“right:500px；”。这将在查看器中正确定位中间面板，但如果不使用jQuery清除“right:500px”的位置，插件将不会滚动到最左边的面板 下面是HTML。我希望可以使用CSS而不是JavaScript设置中间面板的默认位置？有办法吗？或者有没有办法配置scrollTo以设置显示中间面板的默认位置Jquery 3个向左滚动和向右滚动但中间开始的面板滚动窗口,jquery,css,scrollto,Jquery,Css,Scrollto,我正在尝试创建一个页面内查看器，它可以从中间面板开始滚动3个面板作为默认面板，允许用户从中间面板向左或向右滚动 我使用jQuery和ScRelto在面板之间切换，但我无法确定如何抵消面板，默认情况下中间显示的面板。我已经尝试将滚动面板容器的位置设置为相对位置，并设置为“right:500px；”。这将在查看器中正确定位中间面板，但如果不使用jQuery清除“right:500px”的位置，插件将不会滚动到最左边的面板 下面是HTML。我希望可以使用CSS而不是JavaScript设置中间面板的默
<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>
h1{
颜色：红色；
}
.名单{
溢出：隐藏；
显示：块；
宽度：500px；
浮动：左；
}
.列表画布{
位置：相对位置；
宽度：1800px；
浮动：左；
显示：内联块；
}
.列表画布.屏幕{
宽度：500px；
浮动：左；
}
格林先生{
边框：1px纯绿色；
背景颜色：绿色；
}
瑞德先生{
边框：1px纯红；
背景色：红色；
}
蓝先生{
边框：1px纯蓝色；
背景颜色：蓝色；
}
紫色{
边框：3件纯色紫色；
背景颜色：紫色；
}
测试3个面板滚动开始在中间，并能够滚动向左滚动右
以下是容器中3个面板的示例
我是一个摘要屏幕
我是一张名单
我是一个信息屏幕
以下是可视区域中的三个窗格-希望能够使用scrollto向左/向右滚动，但不知道如何找到
在中间开始，仍然有滚动向左滚动，当“右”被设置为定位列表画布以显示中间帧。如何正确设置偏移量，使中间窗格成为默认窗格，并且仍然可以工作？
我是一个摘要屏幕
我是一张名单
我是一个信息屏幕
你好，亚伯拉罕，谢谢你的回复。不能在身体标签上做。页面上还有更多内容，改变位置会产生影响。如果.scrollLeft在您设置.list画布的右侧：500px样式时起作用，则该方式如下：$（“.list canvas”）.scrollLeft（500）；但你会在这里的要点中看到它不是。它应该在查看器中显示蓝色框，而不是红色框。您可以在JSFIDLE中添加scrollTo来查看它应该如何工作吗？
$("body").scrollLeft(500);