[TIMOB-8499] iOS: ScrollView scrollToBottom exists on Android

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2012-05-10T13:47:38.000+0000
Affected Version/s	Release 2.0.0
Fix Version/s	Release 2.1.0, Sprint 2012-10 API
Components	iOS
Labels	api, module_scrollview, parity, qe-testadded
Reporter	Dawson Toth
Assignee	Sabil Rahim
Created	2012-04-03T09:23:30.000+0000
Updated	2013-11-19T06:15:28.000+0000

Description

New Feature / Parity Issue

Android has a "scrollToBottom()" method that iOS does not have. It's a common interaction, so I think it's a good idea to add it to iOS as well. Opened an APIDoc ticket for this as well: [TIDOC-538]

What It Does

Scrolls to the bottom. For horizontal scroll views, this means the rightmost point of the scroll view.

Signature

var scroll = Ti.UI.createScrollView();
/* no ret val */ scroll.scrollToBottom();

Example

var win = Ti.UI.createWindow({
    backgroundColor: '#fff'
});
var scroll = Ti.UI.createScrollView({
    contentHeight: '2000',
    scrollType: 'vertical'
});
scroll.add(Ti.UI.createLabel({
    text: 'Welcome to the top! Touch anywhere to scroll to bottom.', textAlign: 'center',
    color: '#000',
    width: Ti.UI.SIZE, height: Ti.UI.SIZE,
    top: 0
}));
scroll.add(Ti.UI.createLabel({
    text: 'Welcome to the bottom!', textAlign: 'center',
    color: '#000',
    width: Ti.UI.SIZE, height: Ti.UI.SIZE,
    bottom: 0
}));
scroll.addEventListener('click', function (evt) {
    if (!scroll.scrollToBottom) {
        alert('Whoops! scrollToBottom() does not exist on this platform.');
    }
    else {
        scroll.scrollToBottom();
    }
});
win.add(scroll);
win.open();

Comments

Sabil Rahim 2012-05-07

Updated Test case to include more type of scrollviews and scrollToBottom behavior.

   // this sets the background color of the master UIView (when there are no windows/tab groups on it)
   Titanium.UI.setBackgroundColor('#000');
   
   // create tab group
   var tabGroup = Titanium.UI.createTabGroup();
   
   
   //
   // create base UI tab and root window
   //
   var win1 = Titanium.UI.createWindow({  
       title:'vertical',
       backgroundColor:'#fff'
   });
   var tab1 = Titanium.UI.createTab({  
       icon:'KS_nav_views.png',
       title:'vertical',
       window:win1
   });
   
   
   
   //
   // create controls tab and root window
   //
   var win2 = Titanium.UI.createWindow({  
       title:'horziontal',
       backgroundColor:'#fff'
   });
   var tab2 = Titanium.UI.createTab({  
       icon:'KS_nav_ui.png',
       title:'horziontal',
       window:win2
   });
   
   //
   // create controls tab and root window
   //
   var win3 = Titanium.UI.createWindow({  
       title:'combined',
       backgroundColor:'#fff'
   });
   var tab3 = Titanium.UI.createTab({  
       icon:'KS_nav_ui.png',
       title:'combined',
       window:win3
   });
   
   
   //
   //  add tabs
   //
   tabGroup.addTab(tab1);  
   tabGroup.addTab(tab2);  
   tabGroup.addTab(tab3);
   
   // create horizontal scrollview case
   var scroll1 = Ti.UI.createScrollView({
       contentHeight: '1000',
       //scrollType: 'vertical' Not available in iOS
   });
   scroll1.add(Ti.UI.createLabel({
       text: 'top!.', textAlign: 'center',
       color: '#000',
       width: Ti.UI.SIZE, height: Ti.UI.SIZE,
       top: 0
   }));
   scroll1.add(Ti.UI.createLabel({
       text: 'bottom!', textAlign: 'center',
       color: '#000',
       width: Ti.UI.SIZE, height: Ti.UI.SIZE,
       bottom: 0,
       
   }));
   scroll1.addEventListener('click', function (evt) {
       if (!scroll1.scrollToBottom) {
           alert('Whoops! scrollToBottom() does not exist on this platform.');
       }
       else {
           scroll1.scrollToBottom();
       }
   });
   win1.add(scroll1);
   
   //create the vertical scrollview
   var scroll2 = Ti.UI.createScrollView({
       contentWidth: '2000',
       //scrollType: 'vertical'
   });
   scroll2.add(Ti.UI.createLabel({
       text: 'Left!.', textAlign: 'center',
       color: '#000',
       width: Ti.UI.SIZE, height: Ti.UI.SIZE,
       left: 0
   }));
   scroll2.add(Ti.UI.createLabel({
       text: 'right!', textAlign: 'center',
       color: '#000',
       width: Ti.UI.SIZE, height: Ti.UI.SIZE,
       right: 0    
   }));
   scroll2.addEventListener('click', function (evt) {
       if (!scroll2.scrollToBottom) {
           alert('Whoops! scrollToBottom() does not exist on this platform.');
       }
       else {
           scroll2.scrollToBottom();
       }
   });
   win2.add(scroll2);
   
   // combined case
   
   var scroll3 = Ti.UI.createScrollView({
       contentWidth: '2000',
       contentHeight: '2000'
       //scrollType: 'vertical'
   });
   scroll3.add(Ti.UI.createLabel({
       text: 'Left!.', textAlign: 'center',
       color: '#000',
       width: Ti.UI.SIZE, height: Ti.UI.SIZE,
       left: 0
   }));
   scroll3.add(Ti.UI.createLabel({
       text: 'Top!.', textAlign: 'center',
       color: '#000',
       width: Ti.UI.SIZE, height: Ti.UI.SIZE,
       top: 0
   }));
   scroll3.add(Ti.UI.createLabel({
       text: 'right!', textAlign: 'center',
       color: '#000',
       width: Ti.UI.SIZE, height: Ti.UI.SIZE,
       right: 0,
       center:0
   }));
   scroll3.add(Ti.UI.createLabel({
       text: 'bottom!', textAlign: 'center',
       color: '#000',
       width: Ti.UI.SIZE, height: Ti.UI.SIZE,
       bottom: 0,
      
   }));
   scroll3.add(Ti.UI.createLabel({
       text: 'Bottom Right!', textAlign: 'center',
       color: '#000',
       width: Ti.UI.SIZE, height: Ti.UI.SIZE,
       bottom: 0,
       right:0
     
   }));
   scroll3.addEventListener('click', function (evt) {
       if (!scroll3.scrollToBottom) {
           alert('Whoops! scrollToBottom() does not exist on this platform.');
       }
       else {
           scroll3.scrollToBottom();
       }
   });
   win3.add(scroll3);
   
   
   // open tab group
   tabGroup.open();

Sabil Rahim 2012-05-07

[Pull pending](https://github.com/appcelerator/titanium_mobile/pull/2145)
Blain Hamon 2012-05-10

Pull merged.
Michael Pettiford 2012-06-12

Closing issue Tested with Ti Studio build 2.1.0.201206111802 Ti Mobile SDK 2.1.0.v20120612102301 hash refeef019 OSX Lion 10.7.3 iPhone 4S OS 5.1 Pressing the scroll view scrolls the view to the bottom
jithinpv 2013-11-19

anvil test case added PR Link: https://github.com/appcelerator/titanium_mobile/pull/4958

JSON Source