Question

我正在编写一个基于javascript的照片库，其中包含一个可水平滚动的缩略图栏。

>> My current work-in-progress is here <<

我希望缩略图栏在到达最后一个缩略图时停止滚动。为此，我需要找到div内容的总宽度 - 最好不要加上所有缩略图和边距的宽度。

我在window.onload函数中添加了一个警报，因此我可以在不同的浏览器中测试各种元素维度函数。目前它显示了scrollWidth的值，由IE报告为1540px，FireFox，Safari，Opera等报告为920px。

值1540对我来说是正确的，任何人都可以告诉我如何在FireFox等中获取此值。

Answer 1

也许你只是引用了错误的元素。

document.getElementById('thumb_window').scrollWidth

在IE6和firefox 2中的那个页面上给了我1540.这就是你要找的吗？

在IE6中BTW缩略图延伸到右侧滚动条之后。

Answer 2

我认为你正在寻找“offsetWidth”。对于跨浏览器体验，可以滚动[宽度/高度]或偏移[宽度/高度]，以较大者为准。

var elemWidth = (elem.offsetWidth > elem.scrollWidth) ? elem.offsetWidth : elem.scrollWidth;
var elemHeight = (elem.offsetHeight > elem.scrollHeight) ? elem.offsetHeight : elem.scrollHeight;

Answer 3

您可以在服务器端循环显示图像并添加其宽度。（在php中，您可以使用getImagesize()函数执行此操作）。然后你可以将所有图像的总宽度传递给javascript。 E.g：

$total_width=0;
foreach ($images as $image)
{
   $info=getimagesize($image['file_path'];
   $total_width=$total_width +  $info[0];
}

在javascript中：

<script type="text/javascript">
var total_width=<?=$total_width;?>;
</script>

Answer 4

你应该做的是找到div中的最后一个图像元素，相对于它的容器得到它的X位置，添加它的宽度，如果有的话，可以添加它的水平边距。

的伪代码：

total_width = (last_image.x - container.x) + last_image.width + last_image.left_margin + last_image.right_margin

使用JQuery这很容易实现，因为它具有内置的功能，可以获取.last（），获取相对定位和获取边距宽度。

Answer 5

这是一张小桌子： -

             thumb_window             thumb_slide
             scrollWidth offsetWidth  scrollWidth offsetWidth
IE7          1540        920          1540        1540
FF 3.05      1540        920          920         920
Opera 9.5    1540        920          920         920
Safari 3.2   1540        920          1540        920
Chrome 1.0   1540        920          1540        920

Javascript / xhtml - 使用overflow：hidden发现div中内容的总宽度

5 个答案: