在移動Safari中顯示鍵盤時防止屏幕向上滾動

Question

我正在構建一個Angularjs應用程序，該應用程序在一個視圖的底部有一個。

iOS9移動Safari中的問題： 當對textarea進行對焦時，會顯示軟鍵盤並覆蓋視圖的下半部分。

當鍵盤可見時，如何向上滾動頁面以使內容（即textarea）不被覆蓋？

Answer 1

以下是一種防止滾動的方法。輸入焦點時，將overflow:hidden添加到文檔主體。

function toArray (collection) { 
 
     return Array.prototype.slice.call(collection); 
 
    } 
 

 
    function noScroll (event) { 
 
     if (event.type === 'focus') { 
 
      document.body.classList.add('no-scroll'); 
 
     } 
 

 
     else if (event.type === 'blur') { 
 
      document.body.classList.remove('no-scroll'); 
 
     } 
 
    } 
 

 
    var inputs = toArray(document.querySelectorAll('input')); 
 

 

 
    inputs.forEach(function(input){ 
 
     input.addEventListener('focus',noScroll,false); 
 
     input.addEventListener('blur',noScroll,false); 
 
    });

.no-scroll { 
 
    overflow:hidden; 
 
}

滾動頁面，你可以使用document.body.scrollTop當輸入重點和值設置到所需的位置。