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

Question

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

iOS9上移動游俠中的問題：當聚焦textarea時，顯示軟鍵盤並覆蓋視圖的下半部分。

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

Answer 1

這是阻止滾動的一種方法。 添加overflow:hidden當輸入處於焦點時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並將值設置為所需位置。