Javascript / xhtml - определение общей ширины содержимого в div с помощью overflow: hidden
Я пишу фотогалерею на основе javascript с горизонтально прокручиваемой полосой миниатюр.
>> Моя текущая незавершенная работа находится здесь <<
Я хочу, чтобы полоса миниатюр перестала прокручиваться, когда дойдет до последней миниатюры. Для этого мне нужно найти общую ширину содержимого div - желательно без суммирования ширины всех миниатюрных изображений и полей.
Я поместил предупреждение в свою функцию window.onload, чтобы я мог тестировать различные функции измерения элементов в разных браузерах. в настоящее время отображается значение scrollWidth, которое обозначается как 1540 пикселей в IE и 920 пикселей в FireFox, Safari, Opera и т. д.
Значение 1540 является правильным для моих целей. Может ли кто-нибудь сказать мне, как получить это значение в FireFox и т. д.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Я думаю, вы ищете "offsetWidth". Для кроссбраузерности используйте прокрутку [Ширина / Высота] или смещение [Ширина / Высота], в зависимости от того, что больше.
var elemWidth = (elem.offsetWidth > elem.scrollWidth) ? elem.offsetWidth : elem.scrollWidth;
var elemHeight = (elem.offsetHeight > elem.scrollHeight) ? elem.offsetHeight : elem.scrollHeight;
В firefox 2 и scrollWidth, и offsetWidth равны 920 для элемента, который он использует alert () ("thumb_slide").
а в IE7 они оба возвращают 1540
document.getElementById ('thumb_window'). scrollWidth возвращает 1540 как в IE6, так и в firefox 2. Что говорит ваш IE7?
ура! IE7 сообщает 1540 для ширины прокрутки thumb_windows. Спасибо! Я отправлю ответ на свой вопрос через мгновение. с результатами также для Opera и Safari.
Что вам нужно сделать, так это найти последний элемент изображения в div, получить его положение по X относительно его контейнера, добавить его ширину и, возможно, добавить его горизонтальные поля, если они есть.
Псевдокод:
total_width = (last_image.x - container.x) + last_image.width + last_image.left_margin + last_image.right_margin
Это было бы довольно легко сделать с помощью JQuery, поскольку он специально имеет встроенную функциональность для получения .last (), получения относительного позиционирования и выборки ширины полей.
Возможно, вы просто ссылаетесь не на тот элемент.
document.getElementById('thumb_window').scrollWidth
дает мне 1540 на этой странице как в IE6, так и в firefox 2. Это то, что вы ищете?
Кстати, в IE6 миниатюры выходят за пределы правого скроллера.
Я тестирую с FF 3.05 - он возвращает 920. Еще не тестировал с IE6 - спасибо за внимание - отлично работает в IE7.
О, круто. FF2 сообщает 1540, FF3 920 ??
извините, пропустил-прочитал ваш пост. ширина прокрутки на thumb_window - это то, что мне нужно.
Проблема IE6 связана с "hasLayout", исправлена добавлением "zoom: 1" в правило стиля для thumb_window.
Исправление: проблема ie6 привела к тому, что я установил размер окна большого пальца с использованием свойств CSS left и right вместо left и width.
Вы можете прокручивать изображения на стороне сервера и складывать их ширину. (В 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>
Я не голосовал против вас, но вопрос конкретно заключается в том, чтобы избежать суммирования ширины всех изображений.
Извините, я, должно быть, пропустил это.
Вот столик: -
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
Кстати, он тоже возвращает 1540 в Chrome