Question

我有一个项目。在那个项目中，我需要一个加载动画。所以我创造了一个。但问题是我无法隐藏滚动条。如果我通过css给我的身体隐藏溢出，并在加载动画完成后我给了js的溢出自动。它会造成另一个问题。（.inner-menus低于.puller。并且它没有正确地向左移动，它占用了滚动条的空间。）我检测到的原因：当窗口加载时没有滚动条并且js占用窗口宽度和减去.puller宽度从窗口宽度开始，并将值设置为.inner-menu width，并且没有窗口的滚动条宽度。（chrome滚动条宽度为17px。但其他浏览器的滚动条宽度也不是17px）。如果我去整页它就好了因为它取窗口宽度和窗口宽度减去.puller宽度并将值设置为.inner-menu width（这次有滚动条）。
所以我只想让动画div过度滚动。可能吗？如果没有，请尝试提供另一种解决方案
感谢

没有身体溢出隐藏。

＆＃13;

$(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));
});

＆＃13;

* {
    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;
  }
}

＆＃13;

<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>

＆＃13;

隐藏溢出

＆＃13;

$(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));
});

＆＃13;

* {
    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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

在JS中进行此更改。

＆＃13;

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));
});

＆＃13;

加载动画显示在滚动条的上方

1 个答案: