Загрузка анимации появляется выше прокрутки

У меня есть проект. В этом проекте мне нужна анимация загрузки. Поэтому я создал его. но проблема в том, что я не могу скрыть полосу прокрутки. если я даю переполнение, спрятанное в моем теле css, и когда загрузка анимации закончена, я дал переполнение auto js. это создаст еще одну проблему. (.inner-меню идет вниз .puller, и это не идет должным образом, это занимает пространство полосы прокрутки.) Причина, по которой я обнаружил: при загрузке окна нет полосы прокрутки, а js - ширина окна и минус .puller ширину от ширины окна и задайте значение как ширину списка .inner и ширину полосы прокрутки окна (ширина полосы прокрутки хрома равна 17px.but ширина полосы прокрутки браузера не равно 17px). если я перейду на полную страницу, это просто ОК, потому что это займет ширину окна и минус .puller width от ширины окна и установите значение в виде ширины -универсального меню (на этот раз есть полоса прокрутки).
, так что я просто хочу, чтобы анимационный div чересчур прокручивался. Является ли это возможным? если нет, попробуйте дать другое решение.

спасибо

без переполнения тела скрыто.Загрузка анимации появляется выше прокрутки

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

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

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

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

 
\t \t \t \t if ($(".menu").css("left") != "0px") { 
 
\t \t \t \t \t $(".menu").css("left", (-1 * $(window).width() + 50)); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }(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; 
 
\t width: 100vw; 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t 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>

С переполнением скрытые

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

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

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

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

 
\t \t \t \t if ($(".menu").css("left") != "0px") { 
 
\t \t \t \t \t $(".menu").css("left", (-1 * $(window).width() + 50)); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }(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; 
 
\t width: 100vw; 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t 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>

источник

2016-02-18 Shohidul Alam

Нет, вы не можете поместить Div * над * прокрутки. – Nick

Сделать это изменение в вашем 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() { 
 
    \t 
 
\t \t calcWidth = function() { 
 
\t \t var pullerDimensions = $('.puller').width(); 
 
\t \t \t $('.inner-menu').width($(window).width() - (pullerDimensions +2)); 
 
\t \t } 
 
\t \t $(document).ready(function() { 
 
\t \t \t calcWidth(); 
 
\t \t }); 
 

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

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

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

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

источник

2016-02-18 13:05:54

Загрузка анимации появляется выше прокрутки

ответ

Смежные вопросы