scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。
<!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>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <a onClick="onc()">dasdasd</a> <div style="width:400px; height:400px; border: 1px solid #f00;"></div> <div id="nn" style="border:1px solid #666"> <div style="height:900px;">sadasdasd</div> </div> </body> <script type="text/javascript"> //作为一个事件的函数来被调用 function onc () { var dd = document.getElementById("nn").scrollIntoView(true); //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示 } </script> </html>
这个id为nn的div就会到浏览器窗口的顶部显示;
至于false,你可以自行去尝试一下,效果也是很明显的,
=========================================
通过这个函数做的一个小实例,锁定网页的导航条,然后点击导航,调到指定的div,这个功能在一般的网页设计中是很常见的,看代码:
<!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>我是div1的内容</p> </div> <div id="div2"> <p>我是div2的内容</p> </div> <div id="div3"> <p>我是div3的内容</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
<!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>qdabc.cn</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>
欢迎分享本文,转载请保留出处:前端ABC » 关于移动端软键盘与输入框的遮挡问题