Question

我正在寻求禁用覆盖上的滚动。该叠加层的作用方式是在用户实际显示网站之前显示闪烁的徽标。但是，我想禁用滚动。请查看我的代码以确定错误。我想禁用覆盖上的滚动。该叠加层的作用方式是在用户实际显示网站之前显示闪烁的徽标。但是，我想禁用滚动。请查看我的代码以确定错误。

<html>
<head>
        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
        <link rel="stylesheet" href="animate.css">
        <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lato:200,300,400,700,900" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">

    <style>
   #overlay {
  position: absolute;
  display: none;
  background: dodgerblue;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
}


html,
body {
  margin: 0;
  padding: 0;
  background-color: black;


}

* {
  margin: 0; 
  padding: 0;
  font-family: 'Lato', sans-serif;
  color: white;

}


    </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>//$( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

            $(document).ready(function() {
              $('#overlay').fadeIn('fast').delay(4500).fadeOut('fast');
            });</script>

        <script>

        $(document).ready(function() {
              $('#navbar').fadeIn('fast').delay(4500)
            });

        </script>

<body>



    <div class="animated slideOutDown" id="overlay" style="overflow: hidden; text-align: center; animation-delay: 3s; animation-duration: 2.5s;padding-top: 80px; background-color: #181818;"><img class="animated flash" style="height: 350px; animation-delay: 1s; animation-duration: 1.5s;" alt="logo"></img></div>


</body>

</html>

Answer 1

您可以隐藏正文的滚动条，并通过添加“ overflow：hidden;”来防止滚动。到HTML，正文CSS：

html,
body {
    margin: 0;
    padding: 0;
    background-color: black;
    overflow: hidden;
}

然后，您还需要在叠加层淡出后将溢出设置回自动，因此您可以执行以下操作：

$(document).ready(function() {
    $('#overlay').fadeIn('fast');
    setTimeout(function(){
        $('#overlay').fadeOut('fast');
        $('html, body').css('overflow', 'auto')
    }, 4500);
});

（注意：您的操作方式是，禁用Java脚本的任何人都无法查看您的网站。因此，即使占Java脚本的一小部分，您也可能要考虑如何使其对那些禁用Java脚本的用户可见。人。）

禁用徽标叠加上的滚动

1 个答案: