Onsen-UI ,how to write a javascript , keep ons-scroller at the bottom?

Question

how to write a javascript , keep ons-scroller at the bottom?

this my code :

        <ons-page >
            <ons-toolbar>
                <div class="left"><ons-back-button>返回</ons-back-button></div>
                <div class="center">{{user_msg.title}}</div>
            </ons-toolbar>
            <ons-scroller id="scroll_msg"  threshold="0" >      
                <div ng-repeat="msg in msg_history" 
            ng-class="getMsgClass(msg.uid)" >
                    <span ng-if="uid == msg.uid "  >{{msg.msg}}</span>
                    <span ng-if="uid == msg.uid " style="color:#336699;">：{{msg.nickname}}</span>
                    <span ng-if="uid != msg.uid " style="color:#336699">{{msg.nickname}}：</span>
                    <span ng-if="uid != msg.uid "  >{{msg.msg}}</span>
                </div>
            </ons-scroller>


        <ons-bottom-toolbar>
        <input type="text" class="text-input ng-pristine ng-valid ng-touched" 
    placeholder="文字信息" ng-model="user_msg.message" style="margin:6px;" value="">
    <button ng-click="sendUserMessage()">发送</button>
    </ons-bottom-toolbar>   
        </ons-page>

Answer 1

Just create the ons-scroller and set his style attribute with position: absolute; bottom: 0px".

HERE you can find a working CodePen example, with the relative code.

<ons-navigator>
  <ons-toolbar>
    <div class="center">Scroller</div>
  </ons-toolbar>
  <ons-scroller style="height: 200px; width: 100%; border-bottom: 1px solid #ccc; background-color: white; position: absolute; bottom: 0px">
    <div style="text-align: center">
      <h2>I am now scrollable!</h2>
      <h3>Happy scrolling!</h3>
      <h3>Happy scrolling!</h3>
      <h3>Happy scrolling!</h3>
      <h3>Happy scrolling!</h3>
      <h3>Happy scrolling!</h3>
      <h3>Happy scrolling!</h3>
      <h3>Happy scrolling!</h3>
      <h3>Happy scrolling!</h3>
      <h3>Happy scrolling!</h3>
    </div>
  </ons-scroller>
</ons-navigator>

Hope it helps!