5

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>
Jan Turoň
  • 31,451
  • 23
  • 125
  • 169
Able Gao
  • 51
  • 1

1 Answers1

3

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!

Andi Pavllo
  • 2,506
  • 4
  • 18
  • 30
  • this is OK! But how would accomplish the same behavior but have the scroller starting from the end of the last div (e.g the one above the scroller) and not giving a static value on the height (e.g. 200px)? Thanks in advance! – JcDenton86 Jul 01 '15 at 06:30
  • 1
    OK I found it.. height: calc(100% - Npx); is the answer I wanted, where N is the height of the last div in order to get the remaining free space – JcDenton86 Jul 01 '15 at 06:35
  • @JcDenton86 you are welcome! Please consider to upvote my answer and mark it best answer. Doing that you'll help future users, in the same situation, to find a satisfying solution quickly. – Andi Pavllo Jul 01 '15 at 07:09
  • I have already upvoted your answer :) but I can not accept it (I am not allowed by SO) because I am not the one who asked the question. – JcDenton86 Jul 01 '15 at 07:54
  • @JcDenton86 sorry, I didn't realize that, was a very specific question so I thought was the same person, thanks anyway – Andi Pavllo Jul 01 '15 at 08:04