Scrollpane在底部，CSS是hacky，javascript很難

Question

我想在頁面底部放置一個欄，其中包含不同數量的圖片，它們（如果比頁面寬）可以向左和向右滾動。

頁面寬度不同，我希望窗格寬度爲100％。

我試圖通過讓中間div溢出並使用jquery.animate（）對其位置進行動畫處理來製作一個技巧。

像這樣：

這裏是沒有JS提琴：http://jsfiddle.net/SoonDead/DdPtv/7/

的問題是：

1. 沒有大的寬度，宣佈對項目持有人就不會水平但垂直溢出。這是一個很好的黑客？ （請參閱小提琴中的寬度：9000px）

2. 我只想滾動中間窗格，如果有意義的話。爲此，我需要計算溢出項目框的寬度（它應該是項目內部寬度的總和），並使用overflow：hidden屬性來計算容器的寬度。 （這應該是瀏覽器窗口的寬度減去左側和右側按鈕）。

有沒有一種方法來計算的JS東西長度沒有計算它的所有手動的兒童長度和概括起來？

有沒有辦法獲得瀏覽器窗口的寬度？當窗口大小調整時有沒有辦法獲得回調？如果窗口突然變寬（且物品處於不應允許的位置），我需要更正窗格位置

由於窗口的寬度可能會有所不同，所以如果我可以向左或向右滾動，則需要動態計算。

你能幫我用javascript嗎？

更新：我有這個問題的後續問題：Scroll a div vertically to a desired position using jQuery請幫我解決這個問題。

Answer 1

你需要改變你的#items從

#items 
{ 
    float: left; 
    background: yellow; 
    width: 9000px; 
} 

到

#items { 
    background: yellow; 
} 

然後用jQuery

// #items width is calculated as the number of child .item elements multiplied by their outerWidth (width+padding+border) 
$("#items").width(
    $(".item").length * $(".item").outerWidth() 
); 

和SIM卡很容易計算的寬度層聲明單擊事件爲#left和#right元素

$("#left").click(function() { 
    $("#middle").animate({ 
     scrollLeft: "-=50px" 
    }, 'fast'); 
}); 

$("#right").click(function() { 
    $("#middle").animate({ 
     scrollLeft: "+=50px" 
    }, 'fast'); 
}); 

jsFiddle link here

編輯

我忽略了一些關於變化的圖像寬度是細節。這裏是計算總寬度的正確方法

var totalWidth = 0; 
$(".item").each(function(index, value) { 
    totalWidth += $(value).outerWidth(); 
}); 

$("#items").width(totalWidth); 

Answer 2

感謝Phrogz這部分 - 給圖像容器white-space: nowrap;和display: inline-block;。

您可以計算寬度，而不必每次計算兒童的寬度，但您需要計算一次兒童的寬度。

//global variables 
var currentWidth = 0; 
var slideDistance = 0; 
var totalSize = 0; 
var dispWidth = (winWidth/2); //this should get you the middle of the page -- see below 
var spacing = 6; //padding or margins around the image element 

$(Document).Ready(function() { 
$("#Gallery li").each(function() { 
    totalSize = totalSize + parseFloat($(this).children().attr("width"));// my images are wrapped in a list so I parse each li and get it's child 
}); 

totalSpacing = (($("#Gallery li").siblings().length - 1) * spacing); //handles the margins between pictures 
currentWidth = (parseFloat($("#Gallery li.pictureSelected").children().attr("width")) + spacing); 
maxLeftScroll = (dispWidth - (totalSize + totalSpacing)); //determines how far left you can scroll 
}); 

function NextImage() { 
currentWidth = currentWidth + (parseFloat($("#Gallery li.pictureSelected").next().children().attr("width")) + spacing); //gets the current width plus the width of the next image plus spacing. 
slideDistance = (dispWidth - currentWidth) 
$("#Gallery").animate({ left: slideDistance }, 700); 
} 

有一種方法可以在javascript中獲取瀏覽器窗口（jQuery示例）。 並且有一種方法可以捕獲調整大小事件。

var winWidth = $(window).width() 
if (winWidth == null) { 
winWidth = 50; 
} 

$(window).resize(function() { 
    var winNewWidth = $(window).width(); 
    if (winWidth != winNewWidth) { 
     window.clearTimeout(timerID); 
     timerID = window.setInterval(function() { resizeWindow(false); }, 100); 
    } 
    winWidth = winNewWidth; 
}); 

在我的畫廊裏實際上有很多，但這應該讓你指出正確的方向。

Answer 3

在物品容器上使用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); 
});