How to do automatic scrolling

0

I'm developing an application where the user asks a question and the server delivers a response, I'm having trouble getting the scroll bar to follow the conversation, so far I'm having the chat history on the screen, but I have you drag with the mouse to see the new messages. I'm using JSF with AJAX.

<div id="perguntaResposta">
                <ul class="messages">
                    <h:panelGroup id="dialogo">
                        <ui:repeat var="conversa" value="#{chat.conversas}">
                            <h:panelGroup rendered="#{conversa.usuario == 1}">
                                <li class="message right appeared">
                                    <div class="avatar"></div>
                                    <div class="text_wrapper">
                                        <h:outputText value="#{conversa.intereacaoFala}" />
                                    </div>
                                </li>
                            </h:panelGroup>
                            <h:panelGroup rendered="#{conversa.usuario == 2}">
                                <li class="message left appeared">
                                    <div class="avatar"></div>
                                    <div class="text_wrapper">
                                        <h:outputText value="#{conversa.intereacaoFala}"/>
                                    </div>
                                </li>
                            </h:panelGroup>
                        </ui:repeat>
                    </h:panelGroup>
                </ul>
            </div> 
    
asked by anonymous 15.10.2016 / 07:48

1 answer

0

I tested it this way and it worked, try to see.

<div id="peguntaResposta" style="height:100px;overflow-y:scroll" id="test"></div>

It's important to remember that you have to have an initial%%, height , is to display only vertical bar, overflow-y would not appear if you do not need it, if it does not work, try auto

    
15.10.2016 / 11:24