textarea stops scrolling on android

I am creating an ionic/cordova hybrid app. On one of my views, I have a rather large textarea which takes the whole screen by the time the keyboard is up. The problem is when I try and scroll to the bottom of the page, the textarea catches it and stops the page scroll. is it possible to have the textarea scroll until the bottom then the page scrolls after that?

Yes, what I would recommend is putting a block element like and < hr > tag after the textarea. I've created several journal type apps that require a textarea for entry, and I've tried tons of rich editors like tinymce even dabbled with the contenteditable attribute, but I've always come back to a native textarea.

Here is my config that gets the text editor to a sweet spot:

CSS

textarea {
    margin: 0;
    border-radius: 0;
    font-size: 19px; /*optional*/
  -moz-user-select: text; /*android too*/
  -webkit-user-select: text;
}

//JS

$scope.showKeyboard = function(thetxtid) {
    //hide every element in the view so the text area is "fullscreen"
    for (var i = 0; i < ...; i++) {
           document.getElementById(...).style.display = 'none';
        }
    }

    $ionicNavBarDelegate.showBar(false); //if you have a nav bar hide it too

    $timeout(function(){
        //resize text area
        document.getElementById(thetxtid).style.height = window.innerHeight+'px'; // this takes the keyboard height into consideration
    },300)

};

$scope.hideKeyboard = function(thetxtid) {
    //show your elements
    for (var i = 0; i < ...; i++) {
        document.getElementById(...).style.display = 'block';
    }
    $ionicNavBarDelegate.showBar(true);

    $timeout(function(){ 
        //resize text area set the height of the text area to the height of its contents
        var _id = thetxtid;
        text = document.getElementById(_id);
        _scrollH = text.scrollHeight;
        text.style.height = _scrollH + "px";            
    },300);


};

HTML

<textarea class="paper" id="txtid" ng-focus="showKeyboard('txtid')" ng-blur="hideKeyboard('txtid')" placeholder="Something to Share?" ng-model="content.path" ng-trim="false"></textarea>

I hope this helps. Good luck