เลื่อนไปที่ด้านล่างของ div หรือไม่

ฉันกำลังสร้างการแชทโดยใช้ ajax ขอในทางรถไฟและฉันพยายามทำให้ div เลื่อนไปที่ด้านล่างโดยไม่มีโชค

ฉันกำลังห่อทุกอย่างใน div นี้:

#scroll {
    height:400px;
    overflow:scroll;
}

มีวิธีที่จะทำให้มันเลื่อนไปด้านล่างโดยค่าเริ่มต้นโดยใช้ JS หรือไม่

มีวิธีที่จะทำให้มันเลื่อนไปที่ด้านล่างหลังจากการร้องขอ ajax หรือไม่?

นี่คือสิ่งที่ฉันใช้บนเว็บไซต์ของฉัน:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

วิธีนี้ง่ายกว่ามากถ้าคุณใช้jQuery scrollTop :

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

คุณสามารถใช้รหัสต่อไปนี้:

function scrollToBottom (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

วิธีเลื่อนแบบราบรื่นด้วย JQuery:

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

ดูตัวอย่างบนJSFiddle

นี่คือเหตุผลที่ทำงานนี้:

Ref: scrollTop , scrollHeight , clientHeight

ใช้jQuery เคลื่อนไหว :

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

ทำงานได้จาก jQuery 1.6

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

วิธีการใหม่ที่ใช้กับเบราว์เซอร์ปัจจุบันทั้งหมด :

this.scrollIntoView(false);

เลื่อนอย่างราบรื่นด้วย Javascript:

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

หากคุณไม่ต้องการพึ่งพาscrollHeightรหัสต่อไปนี้จะช่วย:

$('#scroll').scrollTop(1000000);

การใช้ jQuery scrollTopใช้เพื่อกำหนดตำแหน่งแนวตั้งของแถบเลื่อนสำหรับองค์ประกอบที่กำหนด นอกจากนี้ยังมีปลั๊กอิน jQuery scrollTo ที่ดีที่ใช้ในการเลื่อนด้วยภาพเคลื่อนไหวและตัวเลือกต่าง ๆ ( ตัวอย่าง )

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

หากคุณต้องการใช้วิธีการเคลื่อนไหวของ jQueryเพื่อเพิ่มแอนิเมชันขณะเลื่อนลงให้ตรวจสอบตัวอย่างต่อไปนี้:

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);

ฉันพบปัญหาเดียวกัน แต่มีข้อ จำกัด เพิ่มเติม: ฉันไม่สามารถควบคุมรหัสที่ผนวกองค์ประกอบใหม่เข้ากับคอนเทนเนอร์เลื่อน ตัวอย่างที่ฉันพบที่นี่ไม่อนุญาตให้ฉันทำเช่นนั้น นี่คือทางออกที่ฉันสิ้นสุดลงด้วย

มันใช้Mutation Observers( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) ซึ่งทำให้สามารถใช้งานได้เฉพาะบนเบราว์เซอร์ที่ทันสมัย ​​(แม้ว่าจะมี polyfills อยู่)

ดังนั้นโดยพื้นฐานแล้วโค้ดทำเช่นนั้น:

var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

ฉันทำซอเพื่อแสดงแนวคิด: https://jsfiddle.net/j17r4bnk/

Javascript หรือ jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

css:

 .messages
 {
      height: 100%;
      overflow: auto;
  }

พบว่ามีประโยชน์จริง ๆ ขอบคุณ

สำหรับ Angular 1.X folks ที่นั่น:

angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

เพียงเพราะการตัดองค์ประกอบ jQuery กับองค์ประกอบ HTML DOM ทำให้เกิดความสับสนเล็กน้อยกับเชิงมุม

นอกจากนี้สำหรับแอปพลิเคชันการแชทฉันพบว่าการกำหนดนี้หลังจากโหลดการแชทของคุณให้เป็นประโยชน์คุณอาจต้องตบเมื่อหมดเวลาอันสั้นเช่นกัน

ภาคผนวกขนาดเล็ก: เลื่อนเท่านั้นหากบรรทัดสุดท้ายสามารถมองเห็นได้แล้ว หากเลื่อนไปเล็กน้อยให้ปล่อยเนื้อหาไว้ที่นั้น (ความสนใจ: ไม่ได้ทดสอบด้วยขนาดตัวอักษรที่แตกต่างกันซึ่งอาจต้องมีการปรับเปลี่ยนบางอย่างภายใน "> = การเปรียบเทียบ"):

var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);                   

// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;

เช่นเดียวกับตัวอย่างโบนัส ฉันกำลังใช้มุมและพยายามเลื่อนเธรดข้อความไปที่ด้านล่างเมื่อผู้ใช้เลือกการสนทนาที่แตกต่างกับผู้ใช้ เพื่อให้แน่ใจว่าการเลื่อนทำงานหลังจากที่ข้อมูลใหม่ถูกโหลดลงใน div ด้วยการทำซ้ำ ng สำหรับข้อความเพียงแค่ตัดส่วนของการเลื่อนในการหมดเวลา

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

ที่จะทำให้แน่ใจว่าเหตุการณ์การเลื่อนถูกเริ่มทำงานหลังจากที่ข้อมูลถูกแทรกลงใน DOM

นอกจากนี้คุณยังสามารถใช้ jQuery แนบแอนิเมชันกับhtml,bodyเอกสารผ่าน:

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

ซึ่งจะส่งผลให้เลื่อนไปด้านบนสุดของ div ด้วย id "div-id"

สคริปต์ Java:

document.getElementById('messages').scrollIntoView(false);

เลื่อนไปที่บรรทัดสุดท้ายของเนื้อหาที่มีอยู่

สิ่งนี้จะช่วยให้คุณเลื่อนลงไปตามความสูงของเอกสาร

$('html, body').animate({scrollTop:$(document).height()}, 1000);

วิธีง่าย ๆ ในการนี้คือการตั้งค่าscroll toให้ความสูงของ div

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

เลื่อนไปที่องค์ประกอบสุดท้ายภายใน div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

ในแอปพลิเคชัน Angular 6 ของฉันฉันเพิ่งทำสิ่งนี้:

postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}

ฟังก์ชั่น clearInterval (ช่วงเวลา) จะหยุดจับเวลาเพื่อให้เลื่อนด้วยตนเองบน / ล่าง

สถานการณ์สมมติของฉัน: ฉันมีรายการของสตริงซึ่งฉันจะต้องผนวกสตริงที่กำหนดโดยผู้ใช้และเลื่อนไปที่ส่วนท้ายของรายการโดยอัตโนมัติ ฉันมีความสูงคงที่ของการแสดงรายการหลังจากนั้นควรล้น

ฉันลองคำตอบของ @Jeremy Ruten มันได้ผล แต่มันก็เลื่อนไปที่องค์ประกอบ (n-1) th หากใครประสบปัญหาประเภทนี้คุณสามารถใช้setTimeOut()วิธีการแก้ไขปัญหา คุณต้องแก้ไขรหัสด้านล่าง:

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

นี่คือลิงค์ StcakBlitz ที่ฉันสร้างขึ้นซึ่งแสดงให้เห็นถึงปัญหาและวิธีแก้ไข: https://stackblitz.com/edit/angular-ivy-x9esw8

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ไม่มีวิธีแก้ปัญหาเหล่านี้สำหรับฉัน ฉันลงเอยด้วยการใช้ offset (). top เพื่อให้ได้ผลลัพธ์ที่ต้องการ นี่คือสิ่งที่ฉันใช้เลื่อนหน้าจอเบา ๆไปที่ข้อความสุดท้ายในแอปพลิเคชันการแชทของฉัน:

$("#html, body").stop().animate({
     scrollTop: $("#last-message").offset().top
}, 2000);

ฉันหวังว่านี่จะช่วยคนอื่นได้

บางครั้งวิธีที่ง่ายที่สุดคือทางออกที่ดีที่สุด: ฉันไม่รู้ว่าจะช่วยได้หรือไม่มันช่วยให้ฉันเลื่อนดูได้เช่นเคย ยิ่ง "y =" ยิ่งสูงก็ยิ่งเลื่อนลงและแน่นอน "0" หมายถึงด้านบนดังนั้นจึงมีตัวอย่างเช่น "1000" อาจอยู่ด้านล่างหรือ "2000" หรือ "3000" เป็นต้นขึ้นอยู่กับระยะเวลาของคุณ หน้าคือ โดยปกติจะใช้งานได้ในปุ่มที่มี onclick หรือ onmouseover

window.scrollTo(x=0,y=150);

กำหนดระยะห่างจากด้านบนขององค์ประกอบที่เลื่อนได้ให้เป็นความสูงทั้งหมดขององค์ประกอบ

const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight

คุณสามารถใช้ HTML DOM scrollIntoView วิธีดังนี้:

var element = document.getElementById("scroll");
element.scrollIntoView();

ใช้:

var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);

หรือตรวจสอบเลื่อนไปที่ด้านล่าง:

    var element = $(element);
    var maxScrollTop = element[0].scrollHeight - element.outerHeight();
    element.on('scroll', function() {
        if ( element.scrollTop() >= maxScrollTop ) {
            alert('scroll to bottom');
        }
    });

หากกำลังดำเนินการเพื่อเลื่อนไปที่ด้านล่างของหน้าต่างแชทให้ทำดังต่อไปนี้

แนวคิดของการเลื่อนไปยัง div เฉพาะในการแชทมีดังต่อไปนี้

1) แต่ละส่วนแชทประกอบด้วยบุคคลเวลาและข้อความถูกเรียกใช้ในการวนซ้ำกับคลาส chatContentbox

2) querySelectorAll ค้นหาอาร์เรย์ดังกล่าวทั้งหมด อาจเป็น 400 โหนด (400 การแชท)

3) ไปที่รายการสุดท้าย

4) scrollIntoView ()

let lastChatBox = document.querySelectorAll('.chatContentBox'); 
lastChatBox = lastChatBox[lastChatBox.length-1]; 
lastChatBox.scrollIntoView();