關於移動端軟鍵盤與輸入框的遮擋問題
阿新 • • 發佈：2019-02-08
scrollIntoView(alignWithTop) 滾動瀏覽器視窗或容器元素，以便在當前視窗的可見範圍看見當前元素。如果alignWithTop為true，或者省略它，視窗會盡可能滾動到自身頂部與元素頂部平齊。——-目前各瀏覽器均支援，其實就這個解釋來說，我覺得還是不夠的，最好還是又圖對吧，來看下圖，更好理解：
html 程式碼
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
--> 這個id為nn的ｄｉｖ就會到瀏覽器視窗的頂部顯示；
至於false，你可以自行去嘗試一下，效果也是很明顯的，
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
通過這個函式做的一個小例項，鎖定網頁的導航條，然後點選導航，調到指定的div，這個功能在一般的網頁設計中是很常見的，看程式碼：
html 程式碼
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>nav測試</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{margin:0; padding:0}
body{width:960px; height:2000px; margin:0 auto; border: 1px dotted #432432;}
ul,li{list-style-type: none;}
a{text-decoration: none;}
.nav{border:1px solid #000;
height:30px;
z-index:9999;
position:fixed ;
top:0px;
_position:absolute;
_top:expression(documentElement.scrollTop + "px");
}
.nav ul li{
float:left;
font-size: 16px;
line-height: 30px;
padding:0px 63px;
}
.nav ul li:hover{
background: #23ded3;
}
#main{
height:1000px;
border:1px solid #f00;
margin-top:30px;
}
#div1{
height:400px;
border: 1px solid #ccc;
}
#div2{
height:400px;
border: 1px solid #ccc;
}
#div3{
height:400px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="headr">
<div class="nav">
<ul>
<li><a>首頁</a></li>
<li><a onclick="onc()">你好</a></li>
<li><a>很好</a></li>
<li><a>他好</a></li>
<li><a>真的</a></li>
<li><a>哦哦</a></li>
</ul>
</div>
</div>
<div id ="main" style="width:960px; height: auto;">
<div id="div1">
<p>我是ｄｉｖ１的內容</p>
</div>
<div id="div2">
<p>我是ｄｉｖ2的內容</p>
</div>
<div id="div3">
<p>我是ｄｉｖ3的內容</p>
</div>
</div>
<div id ="footr"></div>
</body>
<script type="text/javascript">
var dHeight = document.documentElement.clientHeight;
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
div1.style.height = dHeight - 30 + "px"; //通過一個js動態的來確定每個div的高度,還可以通過迴圈來實現，這裡就不加了，各位自己可嘗試
div2.style.height = dHeight -30 + "px";
div3.style.height = dHeight -30 + "px";
var li = document.getElementsByTagName("li");
li[0].onclick = function(){
div1.scrollIntoView(false); //這裡不能給true不然會將會與導航條重疊
}
li[1].onclick = function(){
div2.scrollIntoView(false);
}
li[2].onclick = function(){
div3.scrollIntoView(false);
}
</script>
</html>測試微信瀏覽器輸入框與軟鍵盤交接demo
html 程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
background: #ccc;
}
.sendMsg {
width: 100%;
height: 40px;
padding: 0 15px;
color: #000;
outline: none;
border: 1px solid #f60;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<input class="sendMsg" type="text" placeholder="傳送留言">
<script type="text/javascript">
var winHeight = $(window).height();
$('body').css('height', winHeight);
$('.sendMsg').click(function(e) {
e.preventDefault();
document.querySelector('.sendMsg').scrollIntoView(false);
})
</script>
</body>
</html>