鍍金池/ 問答/HTML/ 前端ios軟鍵盤樣式問題，神坑

前端ios軟鍵盤樣式問題，神坑

初始圖，包括頭部和尾部
初始圖，包括頭部和尾部

剛點(diǎn)幾次正常，紅色底部正常
剛點(diǎn)幾次正常，紅色底部正常

再點(diǎn)幾次就不正常了，紅色底部不正常
再點(diǎn)幾次就不正常了，紅色底部不正常

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">  
<title>Title</title>  
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>  
<style>  
    * {  
        margin: 0;  
        padding: 0;  
    }  

    .top {  
        position: fixed;  
        top: 0;  
        height: 50px;  
        background-color: black;  
        width: 100%;  
    }  

    .but {  
        position: fixed;  
        bottom: 0;  
        height: 50px;  
        background-color: red;  
        width: 100%;  
    }  

    .main {  
        position: absolute;  
        top: 50px;  
        bottom: 50px;  
        width: 100%;  
        /* 使之可以滾動 */  
        overflow-y: scroll;  
        /* 增加該屬性，可以增加彈性 */  
        -webkit-overflow-scrolling: touch;  
    }  

    .content {  
        height: 2000px;  
        overflow-y: scroll;  
    }  
</style>

</head>
<body>
<div class="top"></div>
<div class="main">

<div class="content">  
    <div>1</div>  
    <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div>  
</div>

</div>
<div class="but"><input type="text" />

<button class="submit">提交</button>

</div>
</body>
</html>

回答
編輯回答
孤酒

position：fixed的問題，設(shè)置個padding或者margin，讓頁面出現(xiàn)滾動條。

2017年8月19日 17:36
編輯回答
心沉

scrollIntoView

2017年3月18日 05:40
編輯回答
法克魷

setInterval(function() {

document.body.scrollTop = document.body.scrollHeight

}, 100)

2018年1月1日 18:25
編輯回答
舊酒館

這個？scrollIntoViewIfNeeded 與 scrollIntoView

2018年3月3日 06:10