出现虚拟键盘时阻止滚动

时间:2017-12-17 08:01:26

标签: javascript ios html5 css3 virtual

我遇到IOS设备这样的Iphone有问题。当我聚焦输入(其内部固定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%;
    }
}

1 个答案:

答案 0 :(得分:0)

这对我来说很有效,可以将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'/>