Javascript “水平”；“寻呼”；或在“中滚动”；“视口”；在网页上

我有三列信息，我想在一个一次只显示一列的“视口”（缺少更好的术语）中显示其中的一部分信息。用户可以左右滚动查看其他列，但也需要有直接访问的按钮，例如视图A、视图B和视图C。下面是我尝试的粗略ASCII说明：

textA               textB           textC
textA               textB           textC
textA               textB           textC
textA           _____________       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           _____________       textC

         | view A | view B | view C |

请注意，只有“视口”对用户可见，并且视口下方的按钮应将基础列滚动到视口中。我希望我解释得足够好：）

---

我相信股票的答案是一些“使用JQuery”，但任何具体的提示或提示将不胜感激。即使是（可悲的）“做不到”。谢谢

假设列的宽度是固定的，“使用jQuery”会让这变得轻而易举

布局：

<div class="container">
  <div class="column">
    textA
  </div>
  <div class="column">
    textB
  </div>
  <div class="column">
    textC
  </div>
</div>

javascript示例：

$('#linkA').click(function() {
  $('.container').animate({marginLeft: 0});
}

$('#linkB').click(function() {
  $('.container').animate({marginLeft: -300});
}

$('#linkC').click(function() {
  $('.container').animate({marginLeft: -600});
}

---

这绝对没有经过测试：）。

这是经过测试的答案：
（这是一个next和prev，可以展开以选择要查看的段落）

css:

html:

Lorem ipsum dolor sit amet，是一位杰出的献身者。在普尔文纳多洛的独奏会上，大家都很有尊严。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。一个整数等于一个整数，一个整数等于一个整数。Aenean dolor sem、tristique nec semper vel、ultricies eget sapien。无直径，无直径，无直径，无直径，无直径，无直径。在《暴风雨》和《埃吉斯塔暴风雨》中，同侧节奏和同侧节奏在一起。不属于第二种尊严。这是一种生活方式。佩伦特斯式的格言只是我的维韦拉坐在阿梅特拍卖人的手上。尼西-尼西悬浮液，其他种类的悬浮液，浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿的浮肿。
Nam eget magna lacus，ut accumsan elit。这是一个很好的例子。在一个精英阶层，一个基本要素，一个暂时的空白。无需孕妇补充必需元素。杜伊斯·维尔·奥克托·乌纳。在malesuada sapien的Suspendisse vel nulla neque。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。在梅特斯和里苏斯苏西比特·洛博蒂斯·埃吉特·欧尔纳的梅特斯。奥古斯·瓦里乌斯·库苏斯的奎斯和托托。这是一个很好的例子。Donec libero dolor，aliquam euismod egestas ac，venenatis ac nulla。潜力悬钩子。这是一种兽人侵权行为，是一种精神病。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Mauris vel lacus erat，ultrices和Pat libero。麦格纳食宿、特餐和尼西调味品。埃尼安·泰勒斯·托托，新设备的尊严，时间。拉西尼亚河之门。在厄洛斯中怀孕的猫咪。
面部表情，面部表情，面部表情，面部表情，面部表情，面部表情。在埃利芬德图皮斯泰勒斯，nec莫利斯多洛。我不知道该怎么做。我是mauris malesuada blandit。奥瓦利帕特·图尔皮斯·普莱斯特拉特的佩伦特风格的大众百货公司（commodo metus vel magna bibendum）。这是一种特殊的植物。莫比·尼西·多洛，桑帕斯·康瓦利斯·萨吉蒂，阿利奎特·胡斯托。这是一个很好的例子。在瓦努普塔特东部。这是一个自由的精英告别欧盟的时刻。Mauris Concertetur Elite Vita velit mattis tristique。这是我的智慧。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。暂时性犯罪的中止。我是埃尼姆·米，阿利奎特·阿梅特·弗尼森，奥里帕特在托托。这是一个自由主义者。
下一个
上一个

最后，js：

var index = 0;
var columns = $('.data');
columns.eq(index).show()

$('.n').click(function(){
     columns.eq(index).hide()
     index++;
     if(index+1 > $('.data').length) index = 0;
     columns.eq(index).show()
})

$('.p').click(function(){
     columns.eq(index).hide()
     index--;
     if(index < 0) index = columns.length -1;
     columns.eq(index).show()
})

var指数=0；
变量列=$（'.data'）；
columns.eq（index.show（）列）
$（'.n'）。单击（函数（）{
columns.eq（index.hide（））
索引++；
如果（索引+1>$（'.data'）.length）索引=0；
columns.eq（index.show（）列）
})
$（'.p'）。单击（函数（）{
columns.eq（index.hide（））
索引--；
如果（索引<0），则索引=columns.length-1；
columns.eq（index.show（）列）
})

这是一个非常重要的布局。你是希望有人会这么做，还是你试过一些你有问题的东西？我试过一些不太辣的东西。我实际上并没有寻找任何人来实现它，只是一个指向“看看这个”的指针。我通常能在正确的方向上用一个有用的轻推来解决问题。哇！我其实并不期待实现，只是一个指针，但我永远感谢你！谢谢在这里抹去古老的历史，但我把你的小提琴擦了擦，想和你分享一下。谢谢你的例子！

#viewPort {
    overflow: auto;
    height: 200px;
    width: 250px;
    background: black;
    color: white;
}

.data {
    display: none;
}

<div id="viewPort">

    <div class='data'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin pulvinar dolor, vel dignissim velit porta nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer aliquam adipiscing odio, quis pellentesque nunc luctus vitae. Aenean dolor sem, tristique nec semper vel, ultricies eget sapien. Nulla nulla diam, euismod ut dapibus faucibus, porta eget nibh. Vivamus tempus ipsum quis metus lobortis in tempus est egestas. Nulla pretium ultricies dignissim. Nam tincidunt lorem vitae arcu placerat mollis. Pellentesque dictum justo ac mi viverra sit amet auctor massa sollicitudin. Suspendisse nisi nisi, varius ac ultricies vel, faucibus ut risus.
    </div>
    <div class='data'>
        Nam eget magna lacus, ut accumsan elit. Sed accumsan tincidunt accumsan. Proin urna elit, porttitor sed elementum a, tempor vel nulla. Nulla sollicitudin elementum neque nec gravida. Duis vel auctor urna. Suspendisse vel nulla neque, at malesuada sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in metus in risus suscipit lobortis eget eu urna. Quisque et tortor at augue varius cursus. Sed molestie sem eu justo porta aliquam. Donec libero dolor, aliquam euismod egestas ac, venenatis ac nulla. Suspendisse potenti. Aenean tortor orci, malesuada id pulvinar et, consequat ut lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel lacus erat, ultrices volutpat libero. Suspendisse mi magna, placerat quis ultrices et, condimentum vitae nisi. Aenean tellus tortor, dignissim nec facilisis a, tempus vel arcu. Cras lacinia porta rhoncus. Cras vel nunc eget felis varius gravida in in eros.
    </div>
    <div class='data'>
        Aenean facilisis, nisi et sodales iaculis, purus enim eleifend ante, quis cursus justo elit ut ligula. In eleifend turpis tellus, nec mollis dolor. Nunc blandit tellus nec nunc consequat a bibendum mi aliquet. Sed et velit id mauris malesuada blandit. Pellentesque commodo metus vel magna bibendum at volutpat turpis placerat. Aenean rutrum molestie velit, eu consectetur tellus placerat vitae. Morbi nisi dolor, tempus convallis sagittis at, aliquet in justo. Proin nec elit faucibus metus interdum commodo. Ut in vulputate est. Proin malesuada elit eget libero adipiscing eu tempus mi malesuada. Mauris consectetur elit vitae velit mattis tristique. Quisque sed ipsum sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse posuere dui vel lacus tempor tincidunt. Ut enim mi, aliquet sit amet fermentum non, volutpat in tortor. Nulla sed nisl tellus, eget imperdiet libero.
    </div>
</div>
<span class='n'>NEXT</span><br/><span class='p'>PREV</span>

var index = 0;
var columns = $('.data');
columns.eq(index).show()

$('.n').click(function(){
     columns.eq(index).hide()
     index++;
     if(index+1 > $('.data').length) index = 0;
     columns.eq(index).show()
})

$('.p').click(function(){
     columns.eq(index).hide()
     index--;
     if(index < 0) index = columns.length -1;
     columns.eq(index).show()
})