<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>滚动</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" charset="utf-8"></script>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
overflow-x: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
100%;
height: 50px;
line-height: 50px;
font-size: 18px;
text-align: center;
background: #ccc;
}
main {
/*position: absolute;
top: 50px;
bottom: 10px;*/
left: 20px;
100%;
margin-bottom: 50px;
/* 使之可以滚动 */
/*overflow-y: scroll;*/
/* 增加该属性，可以增加弹性，是滑动更加顺畅 */
-webkit-overflow-scrolling: touch;
padding: 50px 20px;
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
left: 0;
100%;
height: 50px;
line-height: 50px;
text-align: center;
background: #666;
border-top: 1px solid #e6e6e6;
}
footer input {
display: inline-block;
90%;
height: 20px;
font-size: 14px;
outline: none;
border: 1px solid #e6e6e6;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
This is the header
</header>
<main>
<h1>测试滚动条</h1>
<p>Welcome to home</p>
<ul>
<li>Today</li>
<li>is</li>
<li>Sunday</li>
<li>And</li>
<li>I</li>
<li>have</li>
<li>to</li>
<li>go</li>
<li>to</li>
<li>work</li>
<li>tomorrow</li>
<li>have</li>
<li>to</li>
<li>go</li>
<li>to</li>
<li>work</li>
<li>tomorrow</li>
</ul>
<input style="margin-bottom: 15px;" type="text" placeholder="center...">
<br>
<input style="margin-bottom: 15px;" type="text" placeholder="center...">
<br>
<input style="margin-bottom: 15px;" type="text" placeholder="center...">
<br>
<input style="margin-bottom: 15px;" type="text" placeholder="center...">
<ul>
<li>Today</li>
<li>is</li>
<li>Sunday</li>
<li>And</li>
<li>Today</li>
<li>is</li>
<li>Sunday</li>
<li>And</li>
<li>I</li>
<li>have</li>
<li>to</li>
<li>go</li>
<li>to</li>
<li>work</li>
<li>tomorrow</li>
<li>have</li>
<li>to</li>
<li>go</li>
<li>to</li>
<li>work</li>
<li>tomorrow</li>
</ul>
<input style="margin-bottom: 15px;" type="text" placeholder="center...">
<ul>
<li>Today</li>
<li>is</li>
<li>Sunday</li>
<li>And</li>
<li>Today</li>
<li>is</li>
<li>Sunday</li>
<li>And</li>
<li>I</li>
<li>have</li>
<li>to</li>
<li>go</li>
<li>to</li>
<li>work</li>
<li>tomorrow</li>
<li>have</li>
<li>to</li>
<li>go</li>
<li>to</li>
<li>work</li>
<li>tomorrow</li>
</ul>
<input style="margin-bottom: 15px;" type="text" placeholder="center...">
<br>
</main>
<footer>
<input type="text" placeholder="Type here...">
</footer>
</body>
<script type="text/javascript">
window.onload = function () {
var inputs =document.getElementsByTagName('input')
for (var i = 0; i < inputs.length; i++) {
var _input = inputs[i];
_input.onblur = function () {
setTimeout (function () {
var scrollHeight = getScrollTop()
window.scrollTo({
top: Math.max(scrollHeight - 1, 0),
behavior: "smooth"
})
})
}
}
// 获取滚动条高度
function getScrollTop() {
var scroll_top = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scroll_top = document.documentElement.scrollTop;
}
else if (document.body) {
scroll_top = document.body.scrollTop;
}
return scroll_top;
}
if ((/Android/gi).test(navigator.userAgent)) {
window.onresize = function () {
if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 10);
}
}
}
}
</script>
</html>