頁面出現垂直滾動條導致跳動現象解決方案

antzone發表於2017-04-03

在實際應用中，大家可能會遇到這種情況，那就是當內容超過一屏的時候，網頁右側會出現垂直滾動條，這個時候頁面就會出現跳動現象，因為實際存放內容的空間發生了改變，這就有一點點影響頁面的美觀度或者使用者體驗，下面就介紹一下如何解決此問題。

解決方案一:

這種解決方案比較粗暴，那就是無論是否超過一屏都給頁面新增垂直滾動條。

程式碼如下:

[CSS] 純文字檢視 複製程式碼
body { overflow-y: scroll; }

解決方案二:

這個解決方案瀏覽器相容性要比上一種要差一些，但是缺沒有那麼粗暴，更符合我們的預期。

看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
body{
  text-align:center;
  margin:0px;
}
#title {
  font-size:12px;
  color:green;
  float:right;
}
#box{
  margin-left:calc(100vw - 100%);
  clear:both;
  text-align:center;
  color:blue;
}
 
</style>        
<script>
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    document.body.style.height = "1500px";
  }
}
</script>
</head>
<body>
<div id="title">螞蟻部落歡迎您</div>
<div id="box">
  <div>本站的url地址是softwhy.com</div>
</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼可以看出，當點選按鈕之後，頂部的titile文字和底部的按鈕都會發生了跳動現象，但是box的內部文字內容不會發生跳動現象，下面就對程式碼做一下簡單介紹，當然javascript程式碼部分和大部分css程式碼都是非常簡單的，主要介紹核心一段css程式碼:

[CSS] 純文字檢視 複製程式碼
margin-left:calc(100vw - 100%);

關於calc()可以參閱CSS3 calc()一章節。100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，滾動條寬度也計算在內。而100%是可用寬度，是不含滾動條的寬度。所以，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小。這樣的話box元素就永遠處於瀏覽器客戶區橫向居中的狀態。

相關文章