Question

我在我的phonegap应用程序中使用iScroll.js。当我在文本区域中键入消息时，文本不会在webkit中自动滚动到底部。当我禁用-webkit-transform滚动div autoscroll工作时。

我尝试为文本区域设置-webkit-transform: none !important，但它没有给出任何结果。

有人有任何想法吗？

Answer 1

这是webkit错误。作为一种解决方法，您可以在iStarea处于焦点时关闭iScroll元素子节点的-webkit-transform样式，并立即设置scrollTop值以避免跳转滚动内容。然后在模糊上返回原始样式。处理此问题的基本代码如下所示：

// find iScroll block and its child
var scrollBlock = document.getElementById('wrapper');
var iscrollBox = scrollBlock.children[0];
var lastOffset = 0;

// remove translate styles on focus
var focusHandler = function() {
    var styleAttr = getComputedStyle(iscrollBox)['-webkit-transform'];
    var scrolledOffset = new WebKitCSSMatrix(styleAttr).f;

    iscrollBox.style.webkitTransform = '';
    scrollBlock.scrollTop = -scrolledOffset;
    lastOffset = scrolledOffset;
};
var blurHandler = function() {
    scrollBlock.scrollTop = 0;
    iscrollBox.style.webkitTransform = 'translate(0px, '+lastOffset+'px)';
};

// attach focus/blur handlers
var textareas = scrollBlock.querySelectorAll('textarea');
for(var i = 0, l = textareas.length; i < l; i++) {
    textareas[i].onfocus = focusHandler;
    textareas[i].onblur = blurHandler;
}

如果您不喜欢此类JavaScript修补程序，请考虑使用CSS3属性webkit-overflow-scrolling: touch而不是iScroll。它也有一些陷阱，但textarea没有这样的问题。

在textarea中，在webkit-transform之后键入时，autoscroll to bottom不起作用

1 个答案: