javascript - 加载动画出现在滚动条上方

Question

我有一个元素。在那个元素中我需要一个加载动画。所以我创造了一个。但问题是我无法隐藏滚动条。如果我通过 css 将溢出隐藏到我的 body 并且当加载动画完成时我通过 js 自动溢出。它会产生另一个问题。 (.inner-menus 从 .puller 下降。它没有正确地向左移动，它占用了滚动条的空间。)我检测到的原因:当窗口加载时没有滚动条并且 js 占用窗口宽度并减去 .puller width from window width 设置为 .inner-menu width 没有窗口的滚动条宽度。(chrome的滚动条宽度是17px，其他浏览器的滚动条宽度不是17px)。如果我打开整页它就可以了，因为它重新获取窗口宽度并从窗口宽度中减去 .puller 宽度并将值设置为 .inner-menu 宽度(这次有滚动条)。
所以我只希望动画 div 过度滚动。是否可以？如果不是，请尝试提供其他解决方案。

谢谢

没有隐藏 body 溢出。

$(window).load(function() {
    $(".loaderBg").delay(5000).fadeOut("slow");
})
$(document).ready(function() {
  	
		var calcWidth = function() {
		var pullerDimensions = $('.puller').width();
			$('.inner-menu').width($(window).width() - (pullerDimensions +2));
		}
		$(document).ready(function() {
			calcWidth();
		});

		$(window).resize(function() {
			calcWidth();
		}).load(function() {
			calcWidth();
		});
  
  
  		(function($) {
			$(".puller").on("click", function() {
				if ($(".menu").css("left") == "0px") {
					$(".menu").stop().animate({
						left: -1 * $(window).width() + 50
					}, 'slow');
				} else {
					$(".menu").stop().animate({
						left: 0
					}, 'slow');
				}
			});

			$(window).resize(function() {
				var width = $(window).width();

				$(".menu").css("width", width);

				if ($(".menu").css("left") != "0px") {
					$(".menu").css("left", (-1 * $(window).width() + 50));
				}
			});
		}(jQuery));
});

* {
    margin: 0px;
    padding: 0px;
    outline: 0;
}
body {
    background: #3F51B5;
    color: #FFF;
    font-family: arial;
}
.content {
    height: 200vh;
}
.menu {
    background: #FFF;
    color: #333;
    display: block;
    width: 100%;
    left: calc(-100% + 49px);
    height: 150px;
    font-size: 20px;
    border-bottom: 1px solid #A09E9E;
    right: 0px;
    position: absolute;
    width: 100%;
}
.inner-menu {
    display: inline-block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #333;
    color: #fff;
    height: 150px;
}
.loaderBg {
    height: 100vh;
	width: 100vw;
	width: 100%;
	position: fixed;
	z-index: 1000;
    background: #333;
    overflow:hidden;
}
.puller {
    font-size: 20px;
    position: absolute;
    top: 0;
    right: 0px;
    border-left: 1px solid #A09E9E;
    border-right: 1px solid #A09E9E;
    left: auto;
    text-align: center;
    width: 50px;
    height: 150px;
    line-height: 150px;
  cursor: hidden;
}
.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader {
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #ffffff;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em #ffffff;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #ffffff;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em #ffffff;
    height: 5em;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="loaderBg">
    <div class="loader"></div>
</div>
<div class="content">
  <div class="menu">
    <div class="inner-menu">
      menu item-1<br>
      menu item-2
    </div>
    <div class="puller">
      &gt;
    </div>
  </div>
</div>

overflow hidden

$(window).load(function() {
    $(".loaderBg").delay(5000).fadeOut(1000, function(){
      $("body").css("overflow", "auto");
    });
})
$(document).ready(function() {
  	
		var calcWidth = function() {
		var pullerDimensions = $('.puller').width();
			$('.inner-menu').width($(window).width() - (pullerDimensions +2));
		}
		$(document).ready(function() {
			calcWidth();
		});

		$(window).resize(function() {
			calcWidth();
		}).load(function() {
			calcWidth();
		});
  
  
  		(function($) {
			$(".puller").on("click", function() {
				if ($(".menu").css("left") == "0px") {
					$(".menu").stop().animate({
						left: -1 * $(window).width() + 50
					}, 'slow');
				} else {
					$(".menu").stop().animate({
						left: 0
					}, 'slow');
				}
			});

			$(window).resize(function() {
				var width = $(window).width();

				$(".menu").css("width", width);

				if ($(".menu").css("left") != "0px") {
					$(".menu").css("left", (-1 * $(window).width() + 50));
				}
			});
		}(jQuery));
});

* {
    margin: 0px;
    padding: 0px;
    outline: 0;
}
body {
    background: #3F51B5;
    color: #FFF;
    font-family: arial;
    overflow: hidden;
}
.content {
    height: 200vh;
}
.menu {
    background: #FFF;
    color: #333;
    display: block;
    width: 100%;
    left: calc(-100% + 49px);
    height: 150px;
    font-size: 20px;
    border-bottom: 1px solid #A09E9E;
    right: 0px;
    position: absolute;
    width: 100%;
}
.inner-menu {
    display: inline-block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #333;
    color: #fff;
    height: 150px;
}
.loaderBg {
    height: 100vh;
	width: 100vw;
	width: 100%;
	position: fixed;
	z-index: 1000;
    background: #333;
    overflow:hidden;
}
.puller {
    font-size: 20px;
    position: absolute;
    top: 0;
    right: 0px;
    border-left: 1px solid #A09E9E;
    border-right: 1px solid #A09E9E;
    left: auto;
    text-align: center;
    width: 50px;
    height: 150px;
    line-height: 150px;
  cursor: hidden;
}
.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader {
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #ffffff;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em #ffffff;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #ffffff;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em #ffffff;
    height: 5em;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="loaderBg">
    <div class="loader"></div>
</div>
<div class="content">
  <div class="menu">
    <div class="inner-menu">
      menu item-1<br>
      menu item-2
    </div>
    <div class="puller">
      &gt;
    </div>
  </div>
</div>

Answer 1

在您的 JS 中进行此更改。

var calcWidth; // declare calc width as global
    $(window).load(function() {
        $(".loaderBg").delay(2000).fadeOut(1000, function(){
        $("body").css("overflow","auto");
        calcWidth(); // call here
    });
});

$(document).ready(function() {
  	
		calcWidth = function() {
		var pullerDimensions = $('.puller').width();
			$('.inner-menu').width($(window).width() - (pullerDimensions +2));
		}
		$(document).ready(function() {
			calcWidth();
		});

		$(window).resize(function() {
			calcWidth();
		}).load(function() {
			calcWidth();
		});
  
  
  		(function($) {
			$(".puller").on("click", function() {
				if ($(".menu").css("left") == "0px") {
					$(".menu").stop().animate({
						left: -1 * $(window).width() + 50
					}, 'slow');
				} else {
					$(".menu").stop().animate({
						left: 0
					}, 'slow');
				}
			});

			$(window).resize(function() {
				var width = $(window).width();

				$(".menu").css("width", width);

				if ($(".menu").css("left") != "0px") {
					$(".menu").css("left", (-1 * $(window).width() + 50));
				}
			});
		}(jQuery));
});