2016-08-03 94 views
3

我想要滾動向下滾動到底部添加一些文本到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> 

回答

1

我建議使用scrollIntoView方法。

因此,而不是c.scrollTop = c.scrollHeight;只是做c.scrollIntoView(false);

您嘗試的解決方案(c.scrollTop = c.scrollHeight;)不起作用,因爲您將元素動態添加到div中。我的意思是這樣的解決方案是一次性交易。如果您更改內容,則必須重新執行滾動。

除此之外,你可以使用window.scrollTo方法做以下伎倆:

window.scrollTo(0, c.scrollHeight); 
+0

'c.scrollIntoView(false);'它運作良好。 – user3130007

+0

@ user3130007是的,它非常有用。 –

1

如果你想向下滾動,您必須使用此:

window.scrollTo(0,c.scrollHeight); 
+0

你的意思是使用'window.scrollTo(c.scrollHeight,0);'而不是'c.scrollTop = c.scrollHeight;'? – user3130007

+0

是的,我認爲這將工作 –

+1

@ user3130007我相信,他的意思是。但反過來也應該傳遞參數:'window.scrollTo(0,c.scrollHeight);' –

1

使用scrollIntoView()而不是scrollTop & scrollHeight並且不要忘記固定按鈕的位置,否則它將不斷地向上滾動以繼續。

+0

感謝您的提示 – user3130007