gpt4 book ai didi

javascript - 滚动到底部并返回后页面底部出现空白(移动)

转载 作者:行者123 更新时间:2023-11-28 02:47:09 25 4
gpt4 key购买 nike

我刚刚注意到,当我滚动到我的几个网页的底部,滚动回到顶部,然后再次回到底部时,底部应该是背景的地方出现了一个大的空白区域。我看过其他几个解决方案,例如:Random white space at bottom of page but only on mobile ,但解决方案似乎没有解决问题。我无法通过选择移动设备来使用 Chrome 开发人员工具复制该问题,因此我无法解决我的代码中可能导致该行为的错误。以下是其中一个页面的相关代码:

function offset(elementToOffsetBy, elementToOffset, minScreenSize) {
var width = $(window).width();
if(width >= minScreenSize) {
var x = document.getElementById(elementToOffsetBy);
var height = x.offsetHeight;
var top_offset = height * -1;
document.getElementById(elementToOffset).style.top = top_offset + "px";
document.getElementById(elementToOffset).style.bottom = "0px";
}
}
body, html {
height: 100%;
}

#portfolio {
background: url("https://ndmikkiholicdotcom.files.wordpress.com/2016/06/black-and-white-brick-wall-background-white-brick-wall-image-decoration-picture-white-brick-wall.jpg") no-repeat center center fixed;
background-size: cover;
}

.topnav {
overflow: hidden;
}

.topnav a.selected {
background-color: rgba(242, 242, 242, .3);
color: #3b4e6b;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 20px 25px;
}

.topnav a:hover {
color: #3b4e6b;
background-color: rgba(242, 242, 242, .3);
}

.topnav .icon {
/* Hide icon to expand menu */
display: none;
}

/* When screen is less than 600px wide, hide all links except the first one, and display the icon to expand the menu */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

/* When screen is less than 600px wide, display all links vertically when icon is clicked */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
color: #f2f2f2;
background-color: #3b4e6b;
}

.topnav.responsive a:hover {
color: #3b4e6b;
background-color: #f2f2f2;
}
}

.portfolio_img {
width: 80%;
height: 80%;
margin-left: 4em;
margin-right: 4em;
margin-bottom: 3em;
margin-top: 3em;
}

.hover_img {
display: inline-block;
width: 100%;
height: 100%;
}

.hover_img:hover img {
opacity: .2;
}

.hover_img:hover .center_text {
display: block;
}

.center_text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
font-weight: bold;
}

.col-md-4 {
position: relative;
text-align: center;
}

.row {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="image_styles.css" rel="stylesheet" type="text/css">
<link rel='shortcut icon' type='image/x-icon' href='logo.ico'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="navbar.js"></script>
</head>

<body id="portfolio">
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="#" class="selected">Portfolio</a>
<a href="contact.html">Contact</a>
<a class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div class="container">
<h1><b>Projects</b></h1>
<div class="row">
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Breakout">
<div class="center_text"><a href="https://github.com/" target="_blank">Breakout</a>.</div>
</div>
</div>
</div>

<h1><b>Websites</b></h1>
<div class="row">
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Flashcard App">
<div class="center_text"><a href="https://pixy.org/images/placeholder.png" target="_blank">Chemistry Flashcard Web App</a></div>
</div>
</div>

<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
<div class="center_text"><a href="https://pixy.org/images/placeholder.png" target="_blank">Personal Website</a></div>
</div>
</div>

<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
<div class="center_text"><a href="https://pixy.org/images/placeholder.png" target="_blank">Website</a></div>
</div>
</div>
</div>

<h1><b>Publications</b></h1>
<div class="row">
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
<div class="center_text">Author of <a href="https://www.arcadiapublishing.com/" target="_blank">Book</a></div>
</div>
</div>

<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Red Alert Politics">
<div class="center_text"><a href="http://redalertpolitics.com" target="_blank">Red Alert Politics</a></div>
</div>
</div>

<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
<div class="center_text"><a href="https://www.loneconservative.com" target="_blank">Lone Conservative<a/></div>
</div>
</div>
</div>
</div>
</body>
</html>

这是之前的页面截图: Screenshot

页面截图如下: Screenshot

最佳答案

在其他用户的帮助下,我能够识别更精确的语言来搜索问题的解决方案。问题是设置 <body>100%滚动超出原始视口(viewport)时没有给元素足够的高度。通过更改 100%100vh现在,当滚动超出初始视口(viewport)时,背景会扩展,尽管会有轻微的滞后。

关于javascript - 滚动到底部并返回后页面底部出现空白(移动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46867829/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com