在做项目时，我想在页面上添加效果。因此，我将元素从屏幕上移开了。但是，在运行代码时，窗口会使用滚动条调整大小，从而使移动用户难以使用
这是我在屏幕上为该效果制作该元素的代码。
<!--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>
© 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>
答案 0 :(得分：1)
答案 1 :(得分：0)
将css属性overflow:hidden赋予要放到屏幕上的那一个孩子的父div，以防止滚动条