Javascript/xhtml - 发现与溢出div的内容的总宽度：隐藏

我正在写一个基于javascript的照片库与水平滚动缩略图栏。Javascript/xhtml - 发现与溢出div的内容的总宽度：隐藏

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

我想将缩略图栏停止当它到达最后一个缩略图滚动。为此，我需要查找div内容的总宽度 - 最好不要加上所有缩略图图像和边距的宽度。

我已经在我的window.onload函数中放置了一个提醒，这样我就可以在不同的浏览器中测试各种元素的尺寸函数。目前它显示了scrollWidth的值，它由IE浏览器报告为1540px，由FireFox，Safari，Opera等报告为920px。

值1540对我来说是正确的，谁能告诉我如何获取这个值在FireFox等

来源

2009-01-08 Noel Walters

BTW它在Chrome返回1540太 – 2009-01-08 19:04:15

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

document.getElementById('thumb_window').scrollWidth

在IE6和firefox 2的页面上给我1540.那是你在找什么？

顺便说一句，在IE6中，缩略图延伸过了正确的滚动条。

来源

2009-01-08 18:43:13

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

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

来源

2009-01-08 18:40:54

在Firefox 2都scrollWidth和offsetWidth是920对于他正在alert（）ing（“thumb_slide”）的元素。 – 2009-01-08 18:49:29

在IE7中它们都返回1540 – 2009-01-08 18:54:50

document.getElementById（'thumb_window'）。scrollWidth在IE6和firefox 2中返回1540.你的IE7说什么？ – 2009-01-08 18:58:21

-1

你应该做的是找到在div的最后一个图像元素，X位置相对其到达其容器中，加入它的宽度，也许需要添加其水平的利润率，如果有任何。

伪代码：

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

这将是相当容易的使用JQuery，因为它具体地具有内置在功能用于获取。去年（完成），获得相对定位，并取余量宽度。

来源

2009-01-08 18:41:14 Soviut

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

$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>

来源

2009-01-08 18:43:44

-1

这里是一个小表： -

 
      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

来源

2009-01-08 19:33:49

Javascript/xhtml - 发现与溢出div的内容的总宽度：隐藏

回答

相关问题