View Full Version : [OPEN] Padding limits scrolling on touch devices

3 Aug 2015, 3:47 PM
It looks like scrolling on touch devices does not take into account padding. Consider this example (, classic toolkit):
name: 'scroll',
extend: 'Ext.app.Application',
uses: [
launch: function() {
new Ext.widget({
xtype: 'container',
plugins: 'viewport',
layout: 'fit',
items: {
xtype: 'box',
scrollable: 'y',
style: 'font-size: 7em; padding-top: 300px;',
html: 'A<hr>B<hr>C<hr>D<hr>E<hr>F<hr>G<hr>H<hr>I<hr>J<hr>K<hr>'

Here it can be tested: http://greendrake.info/scroll/index.html

While in a desktop browser you can scroll down to the very bottom which is the line beneath the K letter, on touch devices you can scroll down to the I letter only (happens to me both in Chrome device emulator and on a real Galaxy S4).

I guess it has something to do with Ext.scroll.TouchScroller, perhaps? If there is something I can do to fix the issue in the meantime (e.g. digging out the scroller on afterrender and calling a method on it that would refresh scrolling taking into account the padding) please let me know.

Gary Schlosberg
3 Aug 2015, 3:58 PM
Thanks for the report! I have opened a bug in our bug tracker.

2 Sep 2015, 9:44 PM
The following patch/override seems to be solving the problem (at least for me):
--- a/ext/packages/core/src/scroll/TouchScroller.js
+++ b/ext/packages/core/src/scroll/TouchScroller.js
@@ -381,11 +381,11 @@ Ext.define('Ext.scroll.TouchScroller', {
// using scrollWidth/scrollHeight instead of offsetWidth/offsetHeight ensures
// that the size includes any contained absolutely positioned items
if (x == null) {
- x = Math.max(scrollerDom.scrollWidth, dom.clientWidth);
+ x = Math.max(scrollerDom.scrollWidth + dom.clientWidth - el.getWidth(true), dom.clientWidth);

if (y == null) {
- y = Math.max(scrollerDom.scrollHeight, dom.clientHeight);
+ y = Math.max(scrollerDom.scrollHeight + dom.clientHeight - el.getHeight(true), dom.clientHeight);