javascript - 底部的滚动 Pane ，css 是 hacky，javascript 很难

Question

我想在我的页面底部放置一个包含不同数量图片的栏，这些图片(如果比页面宽)可以左右滚动。

页面宽度在变化，我希望 Pane 的宽度为 100%。

我试图通过让中间的 div 溢出并使用 jquery.animate() 为它的位置设置动画来做一个技巧。

像这样:

这是一个没有 js 的 fiddle :http://jsfiddle.net/SoonDead/DdPtv/7/

问题是:

1. 如果不为元素容器声明较大的宽度，它不会水平溢出，而是垂直溢出。这是一个很好的技巧吗？ (看 fiddle 里的width: 9000px)

2. 如果有意义，我只想滚动中间 Pane 。为此，我需要计算溢出元素框的宽度(应该是元素内部宽度的总和)，以及它的容器与 overflow: hidden 属性。 (这应该是浏览器窗口的宽度减去左右按钮)。

有没有一种方法可以在 js 中计算某些东西的长度，而无需手动计算所有子元素的长度并求和？

有没有办法获取浏览器窗口的宽度？有没有办法在调整窗口大小时获得回调？如果窗口突然变宽(并且元素处于不应该允许的位置)，我需要更正 Pane 位置

由于窗口的宽度可能会发生变化，因此我需要即时计算是否可以向左或向右滚动。

你能帮我写 javascript 吗？

更新:我有一个后续问题:Scroll a div vertically to a desired position using jQuery请帮我解决那个问题。

Answer 1

在元素容器上使用 white-space:nowrap 和 display:inline 或 display:inline-block 来防止元素换行并且不需要计算或设置显式宽度。

编辑::这是一个现场演示:http://jsfiddle.net/vhvzq/2/

HTML

<div class="hscroll">
  <ol>
    <li>...</li>
    <li>...</li>
  </ol>
  <button class="left">&lt;</button>
  <button class="right">&gt;</button>
</div>

CSS

.hscroll { white-space:nowrap; position:relative }
.hscroll ol { overflow:hidden; margin:0; padding:0 }
.hscroll li { list-style-type:none; display:inline-block; vertical-align:middle }
.hscroll button { position:absolute; height:100%; top:0; width:2em }
.hscroll .left { left:0 }
.hscroll .right { right:0 }

JavaScript(使用 jQuery)

$('.hscroll').each(function(){
  var $this = $(this);
  var scroller = $this.find('ol')[0];
  var timer,offset=15;
  function scrollLeft(){  scroller.scrollLeft -= offset; }
  function scrollRight(){ scroller.scrollLeft += offset; }
  function clearTimer(){ clearInterval(timer); }
  $this.find('.left').click(scrollLeft).mousedown(function(){
    timer = setInterval(scrollLeft,20);
  }).mouseup(clearTimer);
  $this.find('.right').click(scrollRight).mousedown(function(){
    timer = setInterval(scrollRight,20);
  }).mouseup(clearTimer);
});