データを追加する動的ulの下にスクロールするにはどうすればよいですか？

他の同様の質問でこれらのさまざまな失敗したメソッドを試しました。うまくいけば、皆は私を助けることができる。私はソケットがイベントを受け取る部分で助けが必要です。 #messagesあなたのDOMでスクロール可能なエリアが設けられて、あなたは私からデータを追加する動的ulの下にスクロールするにはどうすればよいですか？

<body> 
    <ul id="messages"></ul> 
    <form id="sendform" action=""> 
     <input id="m" autocomplete="on" /><button>Send</button> 
    </form> 

     <script src="/socket.io/socket.io.js"></script> 
     <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 
     <script> 
      $(function(){ 
       var socket = io(); 
    //   var ready = false; 
       var nick; 
       while(nick=='' || nick==null) 
        nick = prompt('Enter nick : '); 

       socket.emit("join", nick); 

       $('#m').focus(); 
      $("#sendform").submit(function(){ 
        if($('#m').val()=='') 
         return false; 
       socket.emit('chat message',$('#m').val()); 
        $('#m').val(''); 
       return false; 
      }); 

       socket.on("update",function(msg){ 
        $('#messages').append('<li id="update" >'+ msg); 
       }); 
       socket.on('chat message', function(nick,msg){ 
        $('#messages').append("<li> <strong>" + nick + "</strong> : " + msg) ; 
         $('ul, html').css("scrollTop", $("#messages li:last").offset().top); 
       }); 
      }); 

     </script>

出典

2017-06-01 Akash Joshi

を任意の詳細が必要な場合は、これを試すことができますコメントしてください。

$("#messages").animate({scrollTop: $('#messages').prop("scrollHeight")}, 1000);

出典

2017-06-01 12:01:19

ありがとうございます！これで3時間以上を無駄にしました –

私はあなたにさらにコードを説明するのに困っているかもしれませんか？スクロールトップは私のulの底がどこにあるのか理解していますか？ –

'$（ '＃messages'）。prop（" scrollHeight "）'部分は、それが計算される場所で、scrollHeightは垂直スクロール可能な次元です。 – rorymorris89

今、この作品はJavaScript

socket.on('chat message',function(){ 

var msgDiv = document.getElementById('msg-con'); 
     msgDiv.scrollTop = msgDiv.scrollHeight; 

});

希望を追加し、クラス= "MSG-CON" と

<div class="msg-con"> 
<ul class="messages"> 
    <li>messages</li> 
</ul> 
</div>

をdiv要素でul.messagesを包む...

出典

2017-06-01 12:10:09

データを追加する動的ulの下にスクロールするにはどうすればよいですか？

答えて

関連する問題