jquery - 当元素离开屏幕时如何修复正在调整大小的窗口

Question

当我在做一个元素时，我想为我的页面添加一个效果。所以我把元素放在屏幕外。但是当运行代码时，窗口会通过滚动条调整大小，这使得移动用户很难使用

这是我为实现该效果而使该元素脱离屏幕的代码。

    <!--html-->
    <div class="full-view cont" id="desc">
       <h1>What is IoT?</h1>
       <br /><br /><br /><br />
       <section>
       <div class="half-view">
           <img src="https://www.webyot.com/assets/site/img/iot.png" alt="" class="half-img"/>
       </div>
       <div class="half-view">
          <p class="p">
          The internet of things, or IoT, is a system of interrelated computing devices, mechanical and digital machines, objects, animals or people that are provided with unique identifiers (UIDs) and the ability to transfer data over a network without requiring human-to-human or human-to-computer interaction.
               </p>
            </div>
        </section>
    </div>

在 js 中我做了这个

//js
  $(".cont:nth-child(even)").animate({left:"-100%"},1);

我想在不调整窗口大小的情况下隐藏所有这些 div，但它会处理一些凌乱的滚动条。有人知道如何解决吗？

完整代码如下

//js
var conts;
window.onbeforeunload = () => {
  window.scrollTo(0, 0);
}
$(document).ready(() => {
  $(document).scrollTop(0);
  $(".full-view").css("height", window.innerHeight + "px");
  $(".p").css("max-height", window.innerHeight - 150 + "px");
  /*if($(".full-view").hasChild("half-view")) {
    $(".full-view").css({"display":"grid"});
  }*/
  $("body").prepend(`<nav class='main-nav'><ul><li> HOME </li><li> USAGE </li><li> ABOUT </li></ul><button class='burger fas fa-bars' value='false'></button></nav><div class='ddlsup full-view'></div><ul class='ddl full-view' ><i class='fas fa-times-circle' onclick="$('.burger').trigger('click')" style="
    position: relative;
    left: 90%;
    font-size: 20px;
"></i></ul>`);
  $('body').append(`<footer class='main-footer' style="height:` + window.innerHeight + `px">
      <div class='footer-cell logobar'>
        <img src="images/ioticon.png" alt="">
        <img src="images/ioticon.png" alt="">
      </div>
      <section class="contact">
      <div class="footer-cell">
        <a class="fab fa-facebook-square s-media" href="" > Find us on Facebook!</a><br>
        <a class="fab fa-twitter-square s-media" href=""> Follow us on Twitter</a><br>
        <a class="fab fa-google-plus-square s-media" href=""> Follow us on G+</a><br>
        <a class="fas fa-globe-americas s-media" href=""> Visit our website</a><br>

      </div>
      <div class="footer-cell">
        <input type="text" id="feed" placeholder="feedback"><button id="submit" onclick="sendMail()"><i class="fas fa-envelope"></i></button>
        <br><br><br><hr>
        &copy; Copyright MCICTS ` + new Date().getFullYear() + `
      </div>
      <!--/section-->
    </footer>`);
  conts = Array.prototype.slice.call($(".cont"));
  $(".cont:nth-child(even)").animate({
    left: "-100%"
  }, 1);
  $(".cont:nth-child(odd)").animate({
    left: "100%"
  }, 1);
  $(".cont").css("transition-duration", "4s");

  $(".burger").click(() => {
    $(".ddlsup").animate({
      "left": $(".burger").attr("value") == "false" ? "0%" : "100%"
    }, 400);
    $(".ddl").animate({
      "left": $(".burger").attr("value") == "false" ? "60%" : "100%"
    }, 400);
    $(".burger").css("color", $(".burger").attr("value") == "false" ? "black" : "white");
    $(".burger").attr("value", $(".burger").attr("value") == "false" ? "true" : "false");
  });

  $(".ddlsup").click(() => $(".burger").trigger("click"));
  $("#feed").on("change", () => sendMail());

  $(window).scroll(() => {
    $("#" + $(conts[Math.floor(((document.documentElement.scrollTop || document.body.scrollTop) + 50) / scroll)]).attr("id")).css({
      "left": "2.5%"
    });
    conts[Math.floor(((document.body.scrollTop || document.documentElement.scrollTop) + 50) / scroll)] = "";
  });
});

const sendMail = () => {
  window.location = ("mailto:senirupasan@gmail.com?subject=mcicts iot feedback&body=" + $("#feed").val());
}

  body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
}

#home {
  width: 105%;
  font-family: 'Roboto', sans-serif;
  top: -1px;
  color: white;
  font-weight: bold;
  background-image: url("https://www.gsma.com/iot/wp-content/uploads/2018/05/Paper_MobileIoT_5GFuture_1300x640.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.burger {
  position: absolute;
  top: 0px;
  right: 2%;
  z-index: 11;
  width: 45px;
  height: 45px;
  font-size: 18px;
  color: blue;
  background-color: transparent;
  border: none;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 3px;
  transition-duration: .4s;
}

.burger:hover {
  color: #dddddd;
  background-color: rgba(250, 250, 250, 0.2);
}

.burger:active {
  color: #cccccc;
  background-color: rgba(250, 250, 250, 0.3);
}

nav.main-nav {
  position: fixed;
  z-index: 8;
  width: 100%;
  background-color: #dddddd;
  color: blue;
  height: 55px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 8px;
  transition-duration: .4s;
  top: 0px;
}

.main-nav>ul {
  list-style-type: none;
  z-index: 9;
}

.main-nav>ul>li {
  display: inline-block;
  padding-left: 5px;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
}

.half-img {
  width: 80%;
  height: 80%;
  margin: auto;
}

#ex>div>img {
  left: 40%;
  width: 20%;
}


/* #mainti {
           left: 100%;
           position: relative;

         }*/


/*@-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }*/

.ddl {
  width: 40%;
  left: 160%;
  position: fixed;
  z-index: 8;
  list-style-type: none;
  background-color: white;
  padding: 10px;
  height: 100% !important;
}

.ddl>li {
  position: relative;
  top: 45px;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  border-bottom: 1px solid blue;
  height: 50px;
  text-align: center;
  align: bottom;
  padding-top: 35px;
  text-decoration: none;
}

.ddl>li>a {
  text-decoration: none;
}

.ddl>li>a:hover {
  text-decoration: underline;
}

.ddl>li>a:active {
  text-decoration: none;
}

.ddl>li>a:visited {
  position: relative;
  top: 45px;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  border-bottom: 1px solid blue;
  height: 50px;
  text-align: center;
  align: bottom;
  padding-top: 35px;
  text-decoration: none;
}

.ddlsup {
  width: 60%;
  left: 100%;
  height: 100%;
  background-color: black;
  position: fixed;
  z-index: 7;
  background-color: rgba(10, 10, 10, 0.6);
}

img {
  position: relative;
}

img::after {
  content: "CRASHED IMAGE";
  position: absolute;
  font-size: 9px;
  padding: 10px;
  border: 2px dashed black;
}

.p {
  position: relative;
  font-size: 20px;
  letter-spacing: 3px;
  margin: 0;
  display: inline-block;
  font-family: 'Roboto';
}

.full-view {
  margin: 1px;
}

.full-view>section {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column: 2;
}

.half-view>* {
  font-size: 200%;
  letter-spacing: 8px;
  line-height: 130%;
  overflow-y: scroll;
  margin: auto;
}

.examples {}

.footer-cell {
  overflow: hidden;
  border: 0.1px solid black;
  color: white;
  padding: 5%;
}

.main-footer {
  position: relative;
  width: 100%;
  background-color: #02447e;
  top: 15px;
  display: grid;
  grid-template-columns: 33% 66%;
}

#feed {
  width: 75%;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: 3px solid blue;
  height: 35px;
  font-size: 20px;
  color: white;
  outline: none;
  transition-duration: 1s;
}

#submit {
  height: 35px;
  width: 20%;
  font-size: 25px;
  background-color: transparent;
  border: 1px solid transparent;
  outline: transparent;
  text-align: left;
  vertical-align: bottom;
  color: white;
  transition-duration: .5s;
  cursor: pointer;
}

.s-media {
  color: white;
  margin: 12px;
  font-size: 19px;
  font-weight: bold;
  text-decoration: none;
  transition-duration: .3s;
  position: relative;
  top: 10px;
  left: 20px;
}

.s-media:hover {
  border-bottom: 1px solid white;
}

#feed:focus {
  border-bottom: 3px solid #09b0f0;
}

#submit:hover {
  outline: none;
  color: #aaaaaa;
}

.logobar {
  display: grid;
  grid-row: 1;
}

.logobar>img {
  margin: auto;
  border-radius: 50%;
}

.main-footer>section {
  display: grid;
  grid-template-columns: 50% 50%;
}


/*for small devices (mobile phones, etc.) */

@media only screen and (max-width: 600px) {
  .main-nav>ul>li {
    width: 100%;
    border-bottom: 1px solid black;
    padding-bottom: 2px;
    padding-top: 2px;
    position: relative;
  }
  .main-nav {
    height: 80px !important;
    display: inline-table;
    left: 0px !important;
  }
  .main-nav>ul {
    padding: 0px;
  }
  .half-view>* {
    width: 100% !important;
    font-size: 17px !important;
    letter-spacing: normal !important;
    line-height: normal !important;
  }
  .half-view>.examples {
    width: 50%;
  }
  .half-view {
    display: block;
    width: 100% !important;
    height: 49% !important;
    padding: 1px;
  }
  .main-footer {
    display: grid;
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: none;
    grid-template-rows: 30% 70%;
  }
  .contact {
    display: grid;
    grid-template-columns: 50% 50%;
  }
  .logobar {
    grid-row: auto;
    grid-template-columns: 50% 50%;
  }
  .logobar>img {
    width: 70%;
    height: 70%;
    margin: auto;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Internet of Things</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--jQuery-->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <!--google fonts-->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  <script src="script.js"></script>
  <link rel="stylesheet" href="styles.css" />
  <link rel="icon" href="images/ioticon.png" />
  <!--font awesome-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    #home>h1 {
      font-size: 100px;
      top: 20%;
      position: absolute;
      left: 20px;
    }
    
    #desc,
    #hist,
    #ex,
    #pnc {
      width: 95%;
      left: 2.5%;
      position: relative;
    }
    
    #pnctbl>tbody>tr>td:nth-child(odd) {
      background-color: #2ecb71;
    }
    
    #pnctbl>tbody>tr>td:nth-child(even) {
      background-color: tomato;
    }
    
    #pnctbl {
      width: 100%;
      top: 20px;
      position: relative;
    }
    
    #pnctbl>tbody>tr>td {
      width: 50%;
      padding: 15px;
      font-size: 20px;
      font-weight: bold;
      border-radius: 8px;
      text-align: center;
    }
  </style>
</head>

<body>


  <div id="home" class="full-view">
    <br />
    <h1 id="mainti">Internet of <br>Things</h1>

  </div>
  <div class="full-view cont" id="desc">
    <h1>What is IoT?</h1>
    <br /><br /><br /><br />
    <section>

      <div class="half-view">
        <img src="https://www.webyot.com/assets/site/img/iot.png" alt="" class="half-img" />
      </div>
      <div class="half-view">
        <p class="p">
          The internet of things, or IoT, is a system of interrelated computing devices, mechanical and digital machines, objects, animals or people that are provided with unique identifiers (UIDs) and the ability to transfer data over a network without requiring
          human-to-human or human-to-computer interaction.
        </p>
      </div>
    </section>

  </div>
  <div class="full-view cont" id="hist">
    <h1>History</h1>
    <section>

      <div class="half-view">
        <p class="p">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="half-view">
        <img alt="" src="https://aggregate.tibbo.com/v3_images/heading-backgrounds/development-background-image.png" />
      </div>
    </section>

  </div>
  <div class="full-view cont" id="ex">

    <h1>Day-to-Day Examples</h1>

    <div style="overflow-y:scroll;max-height:90%;">
      <h3>Internet</h3>
      <img src="http://icons.iconarchive.com/icons/dtafalonso/modern-xp/512/ModernXP-68-Internet-icon.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>

      <h3>Connected Security Systems</h3>
      <img src="https://www.vcnewsnetwork.com/wp-content/uploads/2017/08/14004-thumb.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>
      <h3>Smart Cars</h3>
      <img src="https://blogs.intel.com/iot/files/2016/01/connectedCar1.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>
      <h3>Personal Assistants</h3>
      <img src="https://www.acelerartech.com/wp-content/uploads/2017/01/Virtual-AccountingAssistant.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>
      <h3>Smart Environments and Houses</h3>
      <img src="http://vnits.vn/wp-content/uploads/2014/04/smarthome.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>
      <a href="#">Read more >></a>
    </div>

  </div>
  <div class="full-view cont" id="pnc">

    <header style="text-align:center"><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/sign-check-icon.png" alt="" style="display:inline-block;" />
      <h1 style="display:inline-block;"> PROS and CONS </h1><img style="display:inline-block;" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/sign-error-icon.png" alt="" /></header>
    <table id="pnctbl">
      <tr>
        <td>Cost Savings</td>
        <td>Over Dependency on Technology</td>
      </tr>
      <tr>
        <td>Information</td>
        <td>Losing Security on Privacy</td>
      </tr>
      <tr>
        <td>Communication</td>
        <td>Lesse Employment Prospects</td>
      </tr>
      <tr>
        <td>Automation and Control</td>
        <td>Complexity
        </td>
      </tr>
      <tr>
        <td>More Available Information Makes Life Easier to Manage.</td>
        <td>Compatability Issues</td>
      </tr>
      <tr>
        <td>Track Inventories or People Easier</td>
        <td>More Opportunities to Fail</td>
      </tr>
      <tr>
        <td>Make Products and Services More Affordable</td>
        <td>Health and Fitness Issues</td>
      </tr>
      <tr>
        <td>Socio-Economic Issues Could Finally be Addressed</td>
        <td>High Potential to Eliminate Jobs</td>
      </tr>
      <tr>
        <td>Instant Access for Data and Information</td>
        <td>Reduce Human Skills</td>
      </tr>
    </table>

  </div>

  <script>
    const scroll = 500;
    $(document).ready(() => {

      //makes the nav bar moves also
      //$("#mainti").animate({"left":"0%"},3000,"linear");
      $(".main-nav").css({
        "color": "white",
        "backgroundColor": "transparent"
      });
      $(".burger").css({
        "color": "white",
        "backgroundColor": "transparent"
      });
      $(".main-nav>ul>li:nth-child(1)").css("border-bottom", "2px solid white");
      $(".ddl").append(`
            <li><a href="#desc" onclick="$('.burger').trigger('click')">What is IOT?</a></li>
            <li><a href="#hist" onclick="$('.burger').trigger('click')">History</a></li>
            <li><a href="#ex" onclick="$('.burger').trigger('click')">Day to Day Examples</a></li>
            <li><a href="#pnc" onclick="$('.burger').trigger('click')">Pros and Cons</a></li>
          `);
    })
    $(document).scroll(() => {
      if (document.body.scrollTop > 784 || document.documentElement.scrollTop > 784) {
        $(".main-nav").css({
          "color": "blue",
          "backgroundColor": "#dddddd"
        });
        $(".burger").css({
          "color": "blue",
          "backgroundColor": "#dddddd"
        });
        $(".main-nav>ul>li:nth-child(1)").css("border-bottom", "2px solid blue");

      } else {
        $(".main-nav").css({
          "color": "white",
          "backgroundColor": "transparent"
        });
        $(".burger").css({
          "color": "white",
          "backgroundColor": "transparent"
        });
        $(".main-nav>ul>li:nth-child(1)").css("border-bottom", "2px solid white");

      }
    })
  </script>

</body>

</html>

Answer 1

你可以试试

.cont {
   overflow-x: hidden;
}

对于父元素

https://developer.mozilla.org/de/docs/Web/CSS/overflow