sencha touch textarea 手机上不显示滚动条，且不能滚动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近在项目中发现 sencha touch 中的 textarea 在手机上不显示滚动条，也不能滚动。

在浏览器中之所以能显示滚动条滚动，那是浏览器为 textarea 添加的滚动条。但在手机中是不会显示滚动条的。可能在以后的版本中会有所改进吧。

于是只能另想办法了，找了一个老外重写的可滑动的 textarea （无滚动条）。

转：

Ext.define('LeslieTest.view.TextArea',
{
extend : 'Ext.field.TextArea',
xtype : 'scrollTextArea', initialize : function() {
this.callParent();
this.element.dom.addEventListener(
Ext.feature.has.Touch ? 'touchstart'
: 'mousedown',
this.handleTouchListener = Ext.bind(
this.handleTouch, this), false);
this.element.dom.addEventListener(
Ext.feature.has.Touch ? 'touchmove'
: 'mousemove',
this.handleMoveListener = Ext.bind(
this.handleMove, this), false);
this.moveListenersAttached = true;
}, destroy : function() {
if (this.moveListenersAttached) {
this.moveListenersAttached = false;
this.element.dom.removeEventListener(
Ext.feature.has.Touch ? 'touchstart'
: 'mousedown',
this.handleTouchListener, false);
this.element.dom.removeEventListener(
Ext.feature.has.Touch ? 'touchmove'
: 'mousemove',
this.handleMoveListener, false);
this.handleTouchListener = this.handleMoveListener = null;
}
this.callParent();
}, handleTouch : function(e) {
this.lastY = e.pageY;
}, handleMove : function(e) {
var textArea = e.target;
var top = textArea.scrollTop <= 0;
var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
var up = e.pageY > this.lastY;
var down = e.pageY < this.lastY;
this.lastY = e.pageY; if ((top && up) || (bottom && down))
e.preventDefault(); if (!(top && bottom))
e.stopPropagation();
}
});