Wie versteckt/entfernt man die Bildlaufleiste in einem div?

Ich frage mich, ob es möglich ist, die Scroll zu entfernen/verstecken, während das blaue div (id = "load") angezeigt wird (2 Sekunden). Wenn die Antwort ja ist, wie kann ich das machen?Wie versteckt/entfernt man die Bildlaufleiste in einem div?

Ich habe versucht, overflow-x zu verwenden: versteckt im blauen div (laden) und es funktioniert nicht.

Der Grund, warum ich das machen muss, ist, weil ich hinter diesem blauen div die volle Website habe und ich nicht will, dass Leute runterscrollen, während der Ladebildschirm (blaues div) zeigt, weil sie im midel erscheinen werden der Website, wenn der Ladebildschirm verschwindet (nach 2 Sekunden).

document.onreadystatechange = function() { 
 
    var state = document.readyState 
 
    if (state == 'complete') { 
 
    setTimeout(function() { 
 
     document.getElementById('interactive'); 
 
     document.getElementById('load').style.visibility = "hidden"; 
 
    }, 2500); 
 
    } 
 
}

#load { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    z-index: 2000; 
 
    background-color: #29d4e6; 
 
    top: 0; 
 
    -webkit-animation-delay: 2.3s; 
 
    -moz-animation-delay: 2.3s; 
 
    -o-animation-delay: 2.3s; 
 
    animation-delay: 2.3s; 
 
}

<html> 
 

 
<head> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="animated fadeOut" id="load">Loading........</div> 
 
    <div style="height:2000px"> Hello there! full website </div> 
 
</body> 
 

 
</html>

Quelle

2017-03-23 Anonymous

'Überlauf: hidden', beachten Sie den Doppel ** d **. –

ja sorry .. ich habe hiDDen gebunden und nix benutzt. –

Ihr Code ist was es ist, Sie müssten 'overflow: hidden' auf den Körper anwenden. –

Sie sollten Ihre Website-Inhalte, während die blauen div zeigt

document.onreadystatechange = function() { 
 
    var state = document.readyState 
 
    if (state == 'complete') { 
 
    setTimeout(function() { 
 
     document.getElementById('interactive'); 
 
     document.getElementById('load').style.visibility = "hidden"; 
 
     document.getElementById('content').className = ''; 
 
    }, 2500); 
 
    } 
 
}

#load { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    z-index: 2000; 
 
    background-color: #29d4e6; 
 
    top: 0; 
 
    -webkit-animation-delay: 2.3s; 
 
    -moz-animation-delay: 2.3s; 
 
    -o-animation-delay: 2.3s; 
 
    animation-delay: 2.3s; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<html> 
 

 
<head> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="animated fadeOut" id="load">Loading........</div> 
 
    <div style="height:2000px" id="content" class="hidden"> Hello there! full website </div> 
 
</body> 
 

 
</html>

Quelle

2017-03-23 11:03:07 Brewal

Danke! Du hast meinen Tag gerettet! –

verstecken Sie wie folgt verwenden können.

Verbergen Sie die overflow Eigenschaft bezieht sich auf <body> Tag Onload und wieder aktivieren Sie es nach dem Seitenrender.

document.onreadystatechange = function() { 
 
    var state = document.readyState 
 
    if (state == 'complete') { 
 
    setTimeout(function() { 
 
     document.getElementById('interactive'); 
 
     document.getElementById('load').style.visibility = "hidden"; 
 
     document.getElementsByTagName("BODY")[0].style.overflow = "auto"; 
 
    }, 2500); 
 
    } else { 
 
    document.getElementsByTagName("BODY")[0].style.overflow = "hidden"; 
 
    } 
 
}

#load { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    z-index: 2000; 
 
    background-color: #29d4e6; 
 
    top: 0; 
 
    -webkit-animation-delay: 2.3s; 
 
    -moz-animation-delay: 2.3s; 
 
    -o-animation-delay: 2.3s; 
 
    animation-delay: 2.3s; 
 
}

<html> 
 

 
<head> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="animated fadeOut" id="load">Loading........</div> 
 
    <div style="height:2000px"> Hello there! full website </div> 
 
</body> 
 

 
</html>

Update: sonst könnten Sie eine CSS-Klasse/ID für den Hauptinhalt definieren und es bis Seite geladen verstecken.

ex:

<div id="content" style="height:2000px"> Hello there! full website </div> 

document.onreadystatechange = function() { 
    var state = document.readyState 
    if (state == 'complete') { 
    setTimeout(function() { 
     document.getElementById('interactive'); 
     document.getElementById('load').style.visibility = "hidden"; 
     document.getElementById('content').style.visibility = "visible"; 
    }, 2500); 
    } else { 
    document.getElementById('content').style.visibility = "hidden"; 
    } 
}

Quelle

2017-03-23 11:05:48 CodeMonkey

Sie können diesen Effekt durch CSS allein erreichen, die von zwei @keyframe Animationen verwenden.

Arbeitsbeispiel:

body { 
 
position: relative; 
 
height: 400vh; 
 
margin: 0; 
 
padding: 6px; 
 
animation: noScrollBar 3s linear; 
 
} 
 

 
.loading { 
 
position: absolute; 
 
display: block; 
 
top: 0; 
 
left: 0; 
 
z-index: 12; 
 
width: 0; 
 
height: 0; 
 
padding: 6px; 
 
background-color: #29d4e6; 
 
opacity: 0; 
 
pointer-events: none; 
 
animation: loading 3s linear; 
 
} 
 

 
.loading::before { 
 
content: 'Loading...'; 
 
} 
 

 
@keyframes noScrollBar { 
 
    0% {position: fixed;} 
 
100% {position: fixed;} 
 
} 
 

 
@keyframes loading { 
 
    0% {width: 100vw; height: 100vh; opacity: 1;} 
 
100% {width: 100vw; height: 100vh; opacity: 1;} 
 
}

<p>Hello there! full website</p> 
 
<div class="loading"></div>

Quelle

2017-03-23 11:19:29 Rounin

können Sie verwenden diese

Script

document.onreadystatechange = function() { 
    var state = document.readyState 
    if (state == 'complete') { 
    setTimeout(function() { 
    document.getElementById('interactive'); 
    document.getElementById('load').style.visibility = "hidden"; 
    document.getElementById('inner-content').style.height = '2000px'; 

    }, 2500); 
    } 
}

CSS

#load { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    z-index: 2000; 
    background-color: #29d4e6; 
    top: 0; 
    -webkit-animation-delay: 2.3s; 
    -moz-animation-delay: 2.3s; 
    -o-animation-delay: 2.3s; 
    animation-delay: 2.3s; 
}

HTML

<div class="animated fadeOut" id="load">Loading........</div> 
<div style="" id="inner-content"> Hello there! full website </div>

Quelle

2017-03-23 11:34:05 Ezzuddin

Wie versteckt/entfernt man die Bildlaufleiste in einem div?

Antwort

Verwandte Themen