常に下にスクロールするには？

divにテキストを追加するときにスクロールスクロールを下に移動したい。これは私のコードです。なぜ私はそれが仕事ではないのか分かりません。常に下にスクロールするには？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <script> 
      window.onload =() => { 
       const add = document.getElementById('add'); 
       const c = document.getElementById('content'); 
       add.addEventListener('click',() => { 
        c.innerHTML += '<p>aaaaa</p>'; 
        c.scrollTop = c.scrollHeight; 
       }); 
      }; 
     </script> 
    </head> 
    <body> 
     <button id="add">add</button> 
     <div id="content"> 
     </div> 
    </body> 
</html>

出典

2016-08-03 user3130007

私はscrollIntoViewメソッドを使用することをお勧めします。

したがって、c.scrollTop = c.scrollHeight;の代わりにc.scrollIntoView(false);としてください。

divに動的に要素を追加するため、試した解決策（c.scrollTop = c.scrollHeight;）は機能しません。私はそのような解決策が一度限りの取引であることを意味します。コンテンツを変更する場合は、スクロールを再実行する必要があります。

window.scrollTo(0,c.scrollHeight);

出典

2016-08-03 12:57:14

'c.scrollIntoView（false）;'うまく動作します。 – user3130007

@ user3130007ええ、それはかなり便利です。 –

は、あなたがこれを使用する必要があります。

はそれに加えて、あなたはwindow.scrollToメソッドを使用して、次のトリックを行うことができますボタンの位置を固定することを忘れないでください。それ以外の場合は、常にスクロールして続行する必要があります。

出典

2016-08-03 12:58:44

'c.scrollTop = c.scrollHeight;の代わりに' window.scrollTo（c.scrollHeight、0）; 'を使用することを意味します。 – user3130007

はい私はそれが動作すると思う –

@ user3130007私は彼がそれを意味すると信じています。しかし、引数は 'window.scrollTo（0、c.scrollHeight）; ' –

利用scrollIntoView()代わりのscrollTop & scrollHeight：あなたはスクロールダウンするかどう

window.scrollTo(0, c.scrollHeight);

出典

2016-08-03 13:06:12

あなたのヒントをありがとう – user3130007

常に下にスクロールするには？

答えて

関連する問題