Onsen-UI，如何编写javascript，在底部保持ons-scroller？

Question

如何编写javascript，在底部保持ons-scroller？

我的代码：

        <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

只需创建ons-scroller并将其style属性设置为position: absolute; bottom: 0px" position: absolute; bottom: 0px" 。

在这里，您可以找到一个有效的CodePen示例，其中包含相关代码。

 <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> 

希望能帮助到你！