javascript - 出现虚拟键盘时防止滚动

Question

我在使用 IOS 设备(例如 Iphone)时遇到问题。当我关注输入(其内部固定的 div)时，虚拟键盘显示。然而，它会滚动整个视口(viewport)，并且位置固定的 div 也会滚动。如何解决这个问题？

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

• > Research 1
• > Research 2

我想要的:

位置固定的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%;
    }
}

Answer 1

这对我有用，可以 react native 将 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'/>