logo标签列表

在移动设备上向下滚动到底部然后向上滚动时，页面底部会出现空白。

javascripthtmlcss
3
我注意到当我滚动到我的几个网页的底部，然后滚回到顶部，再次回到底部时，一个大白色空间出现在应该是背景的底部。我查看了其他解决方案，例如：页面底部出现随机白色空间，但只在移动设备上，但是这个解决方案似乎没有解决问题。我无法通过选择移动设备来使用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>

这是页面之前的截图： 截图

这是页面之后的截图： 截图

可能与 https://dev59.com/rWAf5IYBdhLWcg3wLAGq 有关。 - Gabriele Petrioli
1个回答
1

在其他用户的帮助下，我能够确定更精确的语言来寻找解决问题的方法。问题在于将<body>设置为100％时，在滚动超出原始视口时，该元素没有足够的高度。通过将100％更改为100vh，即使有轻微的延迟，背景现在也会在滚动超出初始视口时延伸。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接