[英]scroll to the bottom as an element is created
我正在制作這個頁面，您的鼠標操作被跟蹤並顯示在屏幕上的列中。 我想在 div 可滾動后立即自動滾動。
我試過了
$(window).scrollTop($('.document').offset().top);
不過好像不是很懂怎么用……可能沒放在應該放的地方吧。
我還嘗試添加:last以防我應該指定它應該滾動到哪個 div。
$(document.body).click(function (b) { var verbes = [ "appuie", "bouscule", "pousse" ]; var adverbes = [ "puis", "ensuite", "pour finir", "alors" ]; var verbe = verbes[Math.floor(Math.random()*verbes.length)]; var adverbe = adverbes[Math.floor(Math.random()*adverbes.length)]; var verbadv = verbe + " " + adverbe; var actionPoetique = $("<div />", { "class": "document" }) .css({ "left": b.pageX + 'px', "top": b.pageY + 'px' }) .append($("<p>" + verbadv + "</p>")) .appendTo(".one"); $(window).scrollTop($('.document:last').offset().top); });
body { font-family: sans-serif; font-size: 1.3rem; margin: 0; background-color: DarkSlateGray; } .wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0px; grid-auto-rows: minmax(100vh, auto); height: 100vh; } .one, .two, .three, .four { position: relative; overflow: scroll; height: 100%; background-color: tan; } .one { grid-column: 1 / 2; } .two { grid-column: 2 / 3; } .three { grid-column: 3 / 4; } .four { grid-column: 4 / 4; } .one::-webkit-scrollbar, .two::-webkit-scrollbar, .three::-webkit-scrollbar, .four::-webkit-scrollbar { } .note { text-align: center; width: 100px; height: 30px; } .note p{ filter: drop-shadow(0 0 0.75rem black); } .document{ text-align: center; } .document p{ padding: 0; margin: 0; } .username{ text-align: center; padding: 0; margin: 0; } .direction{ position: fixed; bottom : 0; width: 25vw; text-align: center; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>en ligne</title> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script src="text.js"></script> <script src="color.js"></script> <script src="users.js"></script> </head> <body> <div class="wrapper"> <div class="one" id="gauche"> <div class="dir1"></div> </div> <div class="two" id="droite"> <div class="dir2"></div> </div> <div class="three" id="gauche2"> <div class="dir3"></div> </div> <div class="four" id="droite2"> <div class="dir4"></div> </div> </div> <div class ="texte"></div> <div class="note" style="display: none;">*</div> </body> </html>
使用:last是一個很好的調用，但是使用$(window).scrollTop你試圖在窗口內滾動，但它無處滾動。 告訴容器改為滾動。
$('.one').scrollTop($('.document:last').offset().top);
如果您開始填充其他人，您將需要指定要在哪個容器中找到哪個.document:last
$('.one').scrollTop($('.one .document:last').offset().top);
或者，您可以滾動到 div 的底部
$('.one').scrollTop($('.one')[0].scrollHeight);
創建新消息/元素時如何自動滾動到div的底部
[英]How to automatically scroll to the bottom of div when a new message / element is created
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.