javascript - 在 webkit-transform 之后键入时，在 textarea 中自动滚动到底部不起作用

Question

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

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

有人有什么想法吗？

Answer 1

这是 webkit 错误。作为一种解决方法，您可以在 textarea 处于焦点时关闭-webkit-transformiScroll 元素的子元素的样式并立即设置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 没有这样的问题。