Gulir ke bawah div?

Saya membuat obrolan menggunakan permintaan ajax di rails dan saya mencoba untuk mendapatkan div untuk menggulir ke bawah tanpa banyak keberuntungan.

Saya membungkus semuanya dalam div ini:

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

Apakah ada cara untuk tetap menggulirnya ke bawah secara default menggunakan JS?

Apakah ada cara untuk tetap menggulirnya ke bawah setelah permintaan ajax?

Inilah yang saya gunakan di situs saya:

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

Ini jauh lebih mudah jika Anda menggunakan jQuery scrollTop :

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

Anda dapat menggunakan kode berikut:

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

Untuk melakukan gulir yang lancar dengan JQuery:

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

Lihat contoh di JSFiddle

Inilah mengapa ini bekerja:

Ref: scrollTop , scrollHeight , clientHeight

menggunakan jQuery animate :

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

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

Bekerja dari jQuery 1.6

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

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

Metode yang lebih baru yang bekerja di semua browser saat ini :

this.scrollIntoView(false);

gulir halus dengan Javascript:

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

Jika Anda tidak ingin mengandalkan scrollHeight, kode berikut ini membantu:

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

Menggunakan jQuery, scrollTop digunakan untuk mengatur posisi vertikal scollbar untuk setiap elemen yang diberikan. ada juga scroll jquery yang bagusUntuk plugin yang digunakan untuk menggulir dengan animasi dan berbagai opsi ( demo )

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

jika Anda ingin menggunakan metode animate jQuery untuk menambahkan animasi saat menggulir ke bawah, periksa cuplikan berikut:

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

Saya telah mengalami masalah yang sama, tetapi dengan kendala tambahan: Saya tidak memiliki kendali atas kode yang menambahkan elemen baru ke wadah gulir. Tidak ada satu pun contoh yang saya temukan di sini yang memungkinkan saya melakukan hal itu. Inilah solusi yang akhirnya saya dapatkan.

Ini menggunakan Mutation Observers( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) yang membuatnya hanya dapat digunakan di browser modern (meskipun polyfill ada)

Jadi pada dasarnya kode tidak hanya itu:

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});

Saya membuat biola untuk menunjukkan konsep: https://jsfiddle.net/j17r4bnk/

Javascript atau jquery:

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

Css:

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

Menemukan ini sangat membantu, terima kasih.

Untuk orang-orang Angular 1.X di luar sana:

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;

  }
]);

Hanya karena pembungkus elemen jQuery versus elemen HTML DOM menjadi sedikit membingungkan dengan sudut.

Juga untuk aplikasi obrolan, saya menemukan membuat tugas ini setelah obrolan Anda dimuat agar bermanfaat, Anda juga mungkin perlu menampar waktu tunggu singkat.

tambahan kecil: hanya menggulung, jika baris terakhir sudah terlihat. jika digulirkan sedikit, tinggalkan konten di tempatnya (perhatian: tidak diuji dengan ukuran font yang berbeda. ini mungkin memerlukan beberapa penyesuaian di dalam "> = perbandingan"):

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;

Sama seperti potongan bonus. Saya menggunakan sudut dan mencoba menggulir utas pesan ke bawah ketika pengguna memilih percakapan yang berbeda dengan pengguna. Untuk memastikan bahwa gulir bekerja setelah data baru dimuat ke div dengan pengulangan ng untuk pesan, cukup bungkus cuplikan gulir dalam batas waktu.

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

Itu akan memastikan bahwa acara gulir dipecat setelah data telah dimasukkan ke DOM.

Anda juga dapat, menggunakan jQuery, melampirkan animasi ke html,bodydokumen melalui:

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

yang akan menghasilkan gulir halus ke bagian atas div dengan id "div-id".

Java Script:

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

Gulir ke baris terakhir dari konten yang ada.

Ini akan memungkinkan Anda menggulir ke bawah mengenai ketinggian dokumen

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

Metode yang sangat sederhana adalah mengatur scroll toketinggian div.

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

Gulir ke elemen terakhir di dalam div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Pada aplikasi Angular 6 saya, saya baru saja melakukan ini:

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

Fungsi clearInterval (interval) akan menghentikan timer untuk memungkinkan gulir manual atas / bawah.

Skenario Saya: Saya memiliki daftar string, di mana saya harus menambahkan string yang diberikan oleh pengguna dan gulir ke akhir daftar secara otomatis. Saya memiliki ketinggian tetap tampilan daftar, setelah itu harus meluap.

Saya mencoba jawaban @Jeremy Ruten, itu berhasil, tetapi bergulir ke elemen (n-1). Jika ada yang menghadapi masalah jenis ini, Anda bisa menggunakan setTimeOut()metode penyelesaian masalah. Anda perlu mengubah kode di bawah ini:

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

Ini adalah tautan StcakBlitz yang saya buat yang menunjukkan masalah dan solusinya: https://stackblitz.com/edit/angular-ivy-x9esw8

Saya tahu ini adalah pertanyaan lama, tetapi tidak ada solusi yang berhasil untuk saya. Saya akhirnya menggunakan offset (). Top untuk mendapatkan hasil yang diinginkan. Inilah yang saya gunakan untuk menggulir layar dengan lembut ke pesan terakhir di aplikasi obrolan saya:

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

Saya harap ini membantu orang lain.

Terkadang yang paling sederhana adalah solusi terbaik: Saya tidak tahu apakah ini akan membantu, itu membantu saya untuk menggulirnya seperti yang pernah saya inginkan juga. Semakin tinggi "y =", semakin turun ke bawah dan tentu saja "0" berarti atas, jadi misalnya "1000" dapat berada di bawah, atau "2000" atau "3000" dan seterusnya, tergantung berapa lama Anda halaman adalah. Ini biasanya bekerja di tombol dengan klik atau onmouseover.

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

Atur jarak dari bagian atas elemen yang dapat digulir menjadi ketinggian total elemen.

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

Anda dapat menggunakan Metode DOM scrollIntoView HTML seperti ini:

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

gunakan:

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

atau periksa gulir ke bawah:

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

Jika ini dilakukan untuk menggulir ke bagian bawah jendela obrolan, lakukan hal berikut

Gagasan untuk menggulir ke div tertentu dalam obrolan adalah sebagai berikut

1) Setiap obrolan yang terdiri dari Orang, waktu dan pesan dijalankan dalam loop untuk dengan kelas chatContentbox

2) querySelectorAll menemukan semua array tersebut. Itu bisa 400 node (400 obrolan)

3) pergi ke yang terakhir

4) scrollIntoView ()

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