Как избавиться от скролла?

Question

[EarthFM]

Как убрать от горизонтального невидимого скролла?
codepen.io/MarsFM/pen/MYgOvK?editors=101

function fullBlock() {
	 	var widthBg = $(window).width();
	 	var heightBg = $(window).height();

	 	$('.b-main-page-scroll').css({ //внешний блок
		  	width: widthBg + 'px',
		  	height: heightBg + 'px',
	  	}); 

	 	$('.b-main-page-scroll__layer img').css({ // картинки
		  	width: widthBg + 'px',
		  	height: heightBg + 'px',
		  	position: 'absolute',
		  	left:'0px',
		  	top:'0px'
	  	});
 	}

(function($, undefined){

 fullBlock();

  $(window).resize(function() {
  		var widthBg = $(window).width();
  		if(widthBg > 980) {
	  		 fullBlock();	
  		} 
  });

})(jQuery)

<div class="b-main-page-scroll">

			<!-- Облака -->
			<div class="b-main-page-scroll__layer b-main-page-scroll__layer-2">
				<img src="images/bg/paralax-main-1.png" alt="Облако">
			</div>
			<!-- Облака -->
			<div class="b-main-page-scroll__layer b-main-page-scroll__layer-3">
				<img src="images/bg/paralax-main-2.png" alt="Облако">
			</div>
			<!-- Замок -->
			<div class="b-main-page-scroll__layer b-main-page-scroll__layer-4">
				<img src="images/bg/paralax-main-3.png" alt="Облако">
			</div>
			<!-- Левое дерево -->
			<div class="b-main-page-scroll__layer b-main-page-scroll__layer-5">
				<img src="images/bg/paralax-main-4.png" alt="Облако">
			</div>
			<!-- Передний фон -->
			<div class="b-main-page-scroll__layer b-main-page-scroll__layer-6">
				<img src="images/bg/paralax-main-5.png" alt="Облако">
			</div>


		</div>

Answer 1

[Андрей Ежгуров]

1. Считать размер не от window, а от body:

var widthBg = $('body').width();
var heightBg = $('body').height();

2. У html, body, .b-main-page-scroll и ,b-main-page-scroll__layer ширина margin, padding и border должны быть равна 0. Иначе их надо учитывать в вычислениях.

3. Если у тега img есть margin - его надо учитывать. Если же есть padding и/или border, то надо использовать свойство CSS box-sizing.

4. На всякий случай имеет смысл для .b-main-page-scroll и .b-main-page-scroll__layer установить свойство CSS "overflow: hidden;".

Comments

[EarthFM]

1. Спасибо, но не body надо использовать, это точно) а window(именно размер окна браузера) body смотрит размер содержимого браузера если будет 3000px то он растянет на эти 3000px.
2. сбрасывал все стлили
Проблема в том, что при изменение окна браузера, а потом обратно ставлю нормальное положение появляется скролл, уже при F5 скролл исчезает а место под него пустое остаётся. Какой то элемент вылезает из окна, поэтому появляется скролл, но в отладчики смотрю всё норм(

Answer 2

[EarthFM]

Пример, там появляются пустые скроллы(

codepen.io/MarsFM/pen/MYgOvK?editors=101