Определение координат блока с абсолютным позиционированием
 

В JS пока очень слабо разбираюсь, прошу подсказать, как можно реализовать следующее.

Имеется блок, содержащий обычный текст и кнопку, раскрывающую меню:

<div class="text">
	<span>Обычный текст</span>
	<div id="chooser" class="menuwrapper">
		<button class="trigger">устройство</button>
		<ul class="menu">
			...
		</ul>
	</div>
</div>

Блок имеет position:relative; ul имеет position:absolute;

Хотелось бы предотвратить выход меню за границы окна браузера. Пытаюсь получить координату левой границы меню:

var c = document.querySelector('#chooser .menu');
var pos_c_left = c.getBoundingClientRect().left;
$('body').append('<div>pos_c_left: ' + pos_c_left + ', ' + $(window).width() + '</div>');

В итоге получаю неверные значения при маленькой ширине окна браузера. Выдается координата левой границы основного блока '.text'.

Каким образом вычислить координату левой границы меню (с абсолютным позиционированием) относительно границы окна браузера? Пробовал считать с offsetParent, выдает аналогичный результат.

Хм, хром по F12 в разделе Properties выдает правильные значения offsetLeft для элементов. А через JS выдаются совсем другие. В чем прикол?

Видимо ты где-то ошибся в своем скрипте. Давай полный пример - html + css + js. Можно на jsfiddle или в местной песочнице.

Дело было в масштабе браузера. Решил так:

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

Тему можно закрывать.