出现虚拟键盘时阻止滚动

Question

我遇到IOS设备这样的Iphone有问题。当我聚焦输入（其内部固定div）虚拟键盘显示。然而，它滚动整个视口和位置固定div滚动。怎么解决这个？

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

• Research 1
• Research 2

我想要的是：

固定位置必须保持在顶部

当虚拟键盘出现时，防止滚动整个站点

允许在搜索结果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%;
    }
}

Answer 1

这对我来说很有效，可以将scrollView滚动到某一点。我不知道这是否会有所帮助，但我希望如此。

//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'/>