底部的滚动窗格，css很粗糙，javascript很硬

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

页面宽度在变化，我希望窗格的宽度为100%

我试图通过让中间div溢出并使用jquery.animate（）设置其位置的动画来实现一个技巧

像这样：

这是一把没有js的小提琴：

问题是：

如果不向物品架声明较大的宽度，它将不会水平溢出，而是垂直溢出。这是一个好的黑客吗？（参见小提琴中的宽度：9000px）

我只想在有意义的情况下滚动中间窗格。为此，我需要计算溢出项框的宽度（它应该是内部项的宽度之和），以及带有overflow:hidden属性的容器。（这应该是浏览器窗口的宽度减去左右按钮）

有没有一种方法可以计算js中某个东西的长度，而不用手动计算它的所有儿童长度并进行汇总

有没有办法获得浏览器窗口的宽度？有没有办法在调整窗口大小时获取回调？如果窗户突然变宽，我需要纠正窗格的位置（并且物品处于不允许的位置）

由于窗口的宽度可以变化，我需要计算的飞行，如果我可以向左或向右滚动

你能帮我学习javascript吗

---

更新：我有一个关于这个问题的后续问题：请也帮我解决这个问题。

感谢Phrogz的这一部分——给图像容器

空白：nowrap和
显示：内联块

可以计算宽度，而不必每次都计算子对象的宽度，但需要计算子对象的宽度一次

//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;
});

在我的图库中，实际上还有很多，但这应该会让你找到正确的方向。
在项目容器上使用
空白：nowrap
，并
显示：内联
或
显示：内联块
以防止项目包装，并且不需要计算或设置显式宽度

编辑：：这里是一个实时工作演示：

HTML





CSS

.hscroll{空白：nowrap；位置：relative}
.hscroll{溢出：隐藏；边距：0；填充：0}
.hscroll li{列表样式类型：无；显示：内联块；垂直对齐：中间}
.hscroll按钮{位置：绝对；高度：100%；顶部：0；宽度：2em}
.hscroll.left{left:0}
.hscroll.right{right:0}

JavaScript（使用jQuery）

$（'.hscroll'）。每个（函数（）{
var$this=$（this）；
var scroller=$this.find（'ol'）[0]；
无功定时器，偏移量=15；
函数scrollLeft（）{scroller.scrollLeft-=offset；}
函数scrollRight（）{scroller.scrollLeft+=offset；}
函数clearTimer（）{clearInterval（timer）；}
$this.find（'.left'）。单击（scrollLeft）。鼠标向下移动（函数（）{
定时器=设置间隔（向左滚动，20）；
}).mouseup（清除计时器）；
$this.find（'.right'）。单击（scrollRight）。鼠标向下移动（函数（）{
定时器=设置间隔（向右滚动，20）；
}).mouseup（清除计时器）；
});
您需要从

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

到

然后使用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()
);

只需为
#left
和
#right
元素声明单击事件

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

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


编辑

我忽略了图像宽度变化的细节。以下是计算总宽度的正确方法

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

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

一个问题就有很多问号。很好，我甚至没有想到这一点，我最终在我的另一个项目中使用了这个解决方案，非常感谢！我还注意到这个解决方案对响应性布局特别好，它没有考虑可变宽度images@CBRRacer谢谢你指出这一点。我忽略了这个细节，对我的答案和JSFIDDLE进行了更新。这是我自己创建类似东西时选择的解决方案。嘿，我有一个后续问题：你能帮我吗？
var totalWidth = 0;
$(".item").each(function(index, value) {
    totalWidth += $(value).outerWidth();
});

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