Scroll to a given object
От: Holms США  
Дата: 04.08.13 23:31
Оценка:
Привет

Как сделать что-бы при добавлении нового элемента в определённый контейнер этот элемент был виден сразу, на данный момент пользователь должен прокрутить что-бы его увидеть.
Код такой.

<html>
<head>
    <style>

        html, body{
            margin: 0px;
            border: 0px;
            padding: 0px;
        }

        div#container
        {
            margin: 0px;
            color:white;
            background-color: #465e2d;
            height:100%;
            vertical-align:bottom;
        }

        .chat-user{
            width: 120px;
            background-color: black;
        }

        .chat-message{
            background-color: lightcoral;
            font-size: 12px;
            padding: 2px;
        }

        .chat-time{
            width: 150px;
            background-color: green;
            text-align: right;
        }

        .chat-time > p {
            text-align: right;
            margin: 2px;
        }

        .container-x       { flow:horizontal; border-spacing:2px; padding:2px; }
        .container-x > div { margin:0; height:1*; }
    </style>

    <script type="text/tiscript">
        function ScrollMessageToBottom(){
            return 10;
        }
    </script>
</head>
<body>

<div id="container">
    <div class="container-x">
        <div class="chat-user">Maceo Jourdan And Burgen</div>
        <div class="chat-message">This is a single row layout. All static child elements of flow:horizontal container are replaced horizontally one by one, forming a single row. Layout is performed with respect to the direction attribute of the container.

            In the horizontal direction, width, left and right margins, borders and paddings of contained elements, when given in flex units, participate in free space distribution. All immediate children of the flow:horizontal container are competing for free space available between the left and right sides of the container's content box. Thus, this free space is distributed among them, proportionally to corresponding flex values.

            In the vertical direction: flex values of height, top and bottom margins, borders and paddings of contained elements are computed against the height of the container. This makes it possible to align elements of the flow:horizontal container not only horizontally, but also vertically.

            All children have the same height with this style:</div>
        <div class="chat-time"><p>12/12/2012 08:34</p></div>
    </div>

</div>

</body>
</html>


Пытаюсь сделать что-то типа списка сообщений в Skype. Новое сообщение показывается внизу и сразу видно в случае когда перед этим был виден последний элемент.
Использую HtmlLayout.

Спасибо
The life is relative and reversible.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.