モバイル側のソフトキーボードと入力ボックスの遮蔽について
24257 ワード
scrollIntoView(alignWithTop)は、ブラウザウィンドウまたはコンテナ要素をスクロールして、現在のウィンドウの表示範囲で現在の要素を表示します.alignWithTopがtrueである場合、またはそれを省略すると、ウィンドウはできるだけ自分の上部にスクロールして要素の上部と平らになります.--今のところ各ブラウザはすべて支持して、実はこの解釈について言えば、私はやはり足りないと思って、やはりまた図を見たほうがいいでしょう、下図を見て、もっとよく理解します:htmlコード
このidがnnのdivはブラウザウィンドウの上部に表示されます.
falseについては、自分で試してみると効果も明らかです.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
この関数の1つの小さい例を通じて、ホームページのナビゲーションバーをロックして、それからナビゲーションをクリックして、指定したdivに異動して、この機能は一般的なホームページの設計の中でとてもよく見られて、コードを見ます:htmlコード
微信ブラウザの入力ボックスとソフトキーボードの引き継ぎdemo htmlコードをテストします
<html>
<head>
<title>TODO supply a titletitle>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
head>
<body>
<a onClick="onc()">dasdasda>
<div style="width:400px; height:400px; border: 1px solid #f00;">div>
<div id="nn" style="border:1px solid #666">
<div style="height:900px;">sadasdasddiv>
div>
body>
<script type="text/javascript">
//
function onc () {
var dd = document.getElementById("nn").scrollIntoView(true); //
}
script>
html>このidがnnのdivはブラウザウィンドウの上部に表示されます.
falseについては、自分で試してみると効果も明らかです.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
この関数の1つの小さい例を通じて、ホームページのナビゲーションバーをロックして、それからナビゲーションをクリックして、指定したdivに異動して、この機能は一般的なホームページの設計の中でとてもよく見られて、コードを見ます:htmlコード
<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コードをテストします
<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>