forked from loveky/Blog
-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Description
[某些技巧](https://www.jianshu.com/p/bc5a5387f056)
H5上达到原生的滚动效果
处理方法, 对需要滚动的组件使用CSS属性
.scrollPart {
-webkit-overflow-scrolling: touch;
}
当虚拟键盘弹出的时候,window的resize事件会被触发。
监听input元素的focus事件,以及window的resize事件。因为focus事件将在resize事件前触发。然后通过scrollIntoViewIfNeeded使输入框可见。
var inputs = document.getElementsByTagName("input");
for (var i = 0; i< inputs.length; i++) {
inputs[i].onclick = function (e) {
window.setTimeout(function () {
e.target.scrollIntoViewIfNeeded();
}, 0);
}
}
if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
}
h5设置键盘为搜索类型
是输入法根据表单元素自己做的识别。你把你的input type 设为 search,就可以了。
然后在css上设置 -webkit-appearance: none; 去除搜索输入框特有的样式。
Metadata
Metadata
Assignees
Labels
No labels