出现虚拟键盘时防止滚动答案

【问题标题】：Prevent scroll when virtual keyboard appears出现虚拟键盘时防止滚动
【发布时间】：2018-05-30 21:31:36
【问题描述】：

我在使用 Iphone 等 IOS 设备时遇到了问题。当我关注输入（它在固定的 div 内）时，虚拟键盘显示。然而，它也是滚动整个视口和位置固定的 div 滚动。如何解决？

我一直在研究许多帖子和论坛

我想要什么：

位置固定的 div 必须保持在顶部

出现虚拟键盘时防止滚动整个网站

允许在搜索结果 div 上滚动

我的html：

<div class="header">
    <button type="button" id="searchButton">Search</button>
    <div class="search"><!-- Its not visible until user click on search button -->
        <input type="text" id="search" placeholder="Search here"/>
    </div>
</div>

这是我的 html，当我输入一些内容时，它会根据我的关键词。结果将附加到DOM。

<div class="search-result"><!-- Appended via javascript -->
    <ul class="suggest-list">
        <li>Some item of search result</li>
    </ul>
</div>

还有 javascript：

$(document).on("click", "#searchButton", function(e){
    var field = $("#search"); // Gets the search input
    field.focus(); // Focus the input for virtual keyboard shows up

});

/* cache dom references */
var $body = jQuery('body');

/* bind events */
$(document).on('focus', 'input', function() {
    $body.addClass('fix');
})
.on('blur', 'input', function() {
    $body.removeClass('fix');
});

还有 sass 文件：

.header {
    position: fixed;
    height: 50px;
    background: #dadce7;
    input {
       height: 100%;
       width: 100%;
       border: 0;
    }
}
/* Style of search result */
.search-result {
    position: fixed;
    top: 50px;
    bottom: 0;
    width: 100%;
    overflow-y: scroll;
}
/* Fix the layout */
body {
    &.fix {
        overflow: hidden;
        position: fixed; // overflow will be work;
        width: 100%;
        height: 100%;
    }
}

【问题讨论】：

标签： javascript ios html css virtual

【解决方案1】：

这对我反应原生以滚动滚动视图到某个点。我不知道这是否会有所帮助，但我希望它会有所帮助。

//use this to scroll to the location (Maybe you could constantly set it to the same place to lock it)
this.refs._scrollView.scrollTo({x: 0, y: 0, animated: true});


//then put this in the scrollView
<ScrollView ref='_scrollView'/>

【讨论】：

我会试试这个