我遇到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%;
}
}
答案 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'/>