5

私はカスタムWebチャットアプリケーションを構築しています。基本を理解している間、これが可能かどうか疑問に思っていました...現在、チャットはdivの上部に表示され、下部では、divがスクロールを開始します。これは機能します。これは素晴らしい。しかし、チャットが最初にdivの下部に来て、次に新しい行が古い行の下に来るなど、IRCクライアントのように作成できるかどうか疑問に思いました。また、divがいっぱいになると、スクロールを開始します。

私はなんとかこれを機能させることができました：私はそれをこのように表示させることができます。しかし、私はそれをスクロールする方法を見つけることができません。スクロールが表示されない（外側のコンテナdivにオーバーフローがあるにもかかわらず、内側のテキストdivにオーバーフローがない場合）か、コンテナdivの幅ではなくテキストの幅に制限されています。

私が試したいくつかのオプション：

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: auto; position: absolute; bottom: 0;"></div></div>

これにより、テキストが下部に正しく表示されますが、スクロールバーは表示されません。

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: scroll; position: absolute; bottom: 0;"></div></div>

これにより、テキストが下部に正しく表示され、スクロールバーが表示されますが、width = 100％であっても、テキストと同じ幅になります...テキストが上部に到達すると、スクロールバーは灰色のままになります。

基本的に、内部またはコンテナdivにスクロールバーが必要ですか？これは可能ですか？それを強制的に機能させるにはどうすればよいですか？これは完全に間違っていますか？

4

3 に答える 3

8

chatmessagesただ背が高くなり続けるので、スクロールバーは作動しません。

次のスタイルを使用します。

    #chatbox
    {
        overflow:   none;
        position:   relative;
        width:      100%;
        height:     400px;
    }
    #chatmessages
    {
        overflow:   auto;
        position:   absolute;
        bottom:     0;
        max-height: 400px;
    }
于 2010-06-09T16:48:32.760 に答える
3

このjqueryを使用して下にスクロールすると、常に最新のメッセージが表示されます。

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight);

#chatmessagesの場合、width：100％を使用し、max-heightは#chatboxの高さと同じです。

#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border:     1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width:      100%;
    max-height: 200px;
}

サンプルのテキストメッセージを使用して、これらのフィドルを作成しました。

スクロール付きjsfiddle

スクロールなしのjsfiddle

于 2015-07-14T09:17:17.413 に答える
2

私はjavascriptを必要としないソリューションを思いつきました。これは、より高速に動作することを意味します。チャットを一番下までスクロールする場合、スクロールの高さを読み込んで変更する画像の例として、注意すべき変数がたくさんあります。

私が提案したソリューションでは、チャットはスクロール可能なラッパーで180度回転します。ラッパーの内部には、180度回転した別のdivがあります。このようにして、新しいメッセージが表示されたときにも、内側のdivが自然に下に浮きます。

<div id="chat_wrap" class="scrollable" style="transform-origin: 50% 50%; transform: rotate(180deg);" onscroll="reverseScroll()">
   <div id="messages_wrap" style="float: left;width: 100%; transform: rotate(180deg);">
      <div class="message">Your message</div>
   </div>
</div>

ちなみに、私の「chat_wrap」divの位置は絶対位置で、上/下/左/右が本来の位置に合うように設定されています。

于 2016-08-01T15:14:08.877 に答える