Резервируем место под вертикальный scrollbar

17 Апр
2012

Столкнулся с проблемой что содержимое страницы двигается влево/вправо из-за появления/отсутствия scrollbar в браузере, содержимое страницы сдвигается на 18 пикселей.

Под катом JavaScript код который решает эту проблему.



Чтобы страница не двигалась, нужно добавить следующий JavaScript код сразу после тега body:
<script type="text/javascript">
	(function(w, d){
		// ширина scrollbar
		var scrollbar_width = 18;
		
		var currentStyle = (d.body.currentStyle ? d.body.currentStyle : w.getComputedStyle(d.body, null));
		
		// убрать margin справа
		if(parseInt(currentStyle.marginRight) > 0)
		{
			d.body.style.marginRight = 0;
		}
		
		var marginLeft = parseInt(currentStyle.marginLeft);
		if(marginLeft > 0)
		{
			scrollbar_width += marginLeft;
		}
		
		// выполняет код при изменении размеров окна
		(d.body.onresize = function()
		{
			d.body.style.width = (w.innerWidth - scrollbar_width)+'px';
		})(); // сразу же и выполнить его
	
	})(window, document);
</script>


Теперь исследуем страницу с помощью встроенного Инспектора(Ctrl + Shift + I) в Firefox:



Как видно на скриншоте место под вертикальный scrollbar зарезервировано.

Примеры:
Со скриптом: goo.gl/abLnm
С jQuery: goo.gl/bKXl1
Без скрипта: goo.gl/R5dJg Что интересного почитать? Например это: темная материя и темная энергия — это одно и то же?
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх