我有一个元素。在那个元素中我需要一个加载动画。所以我创造了一个。但问题是我无法隐藏滚动条。如果我通过 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">
>
</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">
>
</div>
</div>
</div>
最佳答案
在您的 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));
});
关于javascript - 加载动画出现在滚动条上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35476307/