Saya membuat chat menggunakan ajax permintaan di rel dan I'm berusaha untuk mendapatkan sebuah div untuk gulir ke bawah tanpa banyak keberuntungan.
Saya membungkus semuanya dalam div ini:
#scroll {
height:400px;
overflow:scroll;
}
Apakah ada cara untuk tetap menggulir ke bawah secara default menggunakan JS?
Apakah ada cara untuk tetap menggulir ke bawah setelah permintaan ajax?
Berikut ini's apa yang saya gunakan di situs saya:
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
Ini jauh lebih mudah jika anda're 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 halus scroll dengan JQuery:
function scrollSmoothToBottom (id) {
var div = document.getElementById(id);
$('#' + id).animate({
scrollTop: div.scrollHeight - div.clientHeight
}, 500);
}
Melihat contoh pada [JSFiddle][1]
Dan yang's cara kerjanya:
[][1]
Ref: scrollTop, scrollHeight, clientHeight
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
Karya-karya dari jQuery 1.6
Baru metode yang bekerja pada semua browser yang ada saat ini:
this.scrollIntoView(false);
Dengan menggunakan jQuery, scrollTop digunakan untuk mengatur posisi vertikal scollbar yang diberikan untuk setiap elemen. ada juga yang bagus jquery scrollTo plugin digunakan untuk menggulir dengan animasi dan pilihan yang berbeda (demo)
var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;
jika anda ingin menggunakan jQuery's bernyawa metode untuk menambahkan animasi saat menggulir ke bawah, lihat cuplikan berikut:
var myDiv = $("#div_id").get(0);
myDiv.animate({
scrollTop: myDiv.scrollHeight
}, 500);
Ini benar-benar membantu, terima kasih.
Untuk Sudut 1.X orang-orang 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 di jQuery elemen terhadap elemen DOM HTML mendapat sedikit membingungkan dengan sudut.
Juga untuk aplikasi chatting, saya menemukan pembuatan tugas ini setelah anda chatting yang dimuat untuk menjadi berguna, anda juga mungkin perlu untuk menampar pendek timeout juga.
Hanya sebagai bonus cuplikan. I'm menggunakan sudut dan mencoba untuk menggulir pesan benang ke bawah ketika pengguna memilih percakapan yang berbeda dengan pengguna. Dalam rangka untuk memastikan bahwa gulir bekerja setelah data baru telah dimuat ke dalam div dengan ng-repeat untuk pesan, hanya membungkus gulir cuplikan dalam batas waktu.
$timeout(function(){
var messageThread = document.getElementById('message-thread-div-id');
messageThread.scrollTop = messageThread.scrollHeight;
},0)
Yang akan memastikan bahwa acara gulir dipecat setelah data-data yang telah dimasukkan ke dalam DOM.
kecil addendum: gulungan saja, jika baris terakhir ini sudah terlihat. jika menggulir sedikit, daun konten di mana itu (perhatian: tidak diuji dengan ukuran font yang berbeda. ini mungkin membutuhkan beberapa penyesuaian 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;
Saya mengalami masalah yang sama, tapi dengan kendala tambahan: saya tidak memiliki kontrol atas kode yang ditambahkan unsur-unsur baru untuk gulir wadah. Tidak ada contoh yang saya temukan di sini memungkinkan saya untuk melakukan hal itu. Di sini adalah solusi saya berakhir dengan .
Menggunakan Mutasi Pengamat
(https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) yang membuatnya dapat digunakan hanya pada browser modern (meskipun polyfills 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 sebuah biola untuk menunjukkan konsep :
Saya tahu ini adalah pertanyaan lama, tapi tidak ada solusi ini bekerja untuk saya. Akhirnya saya menggunakan offset().atas untuk mendapatkan hasil yang diinginkan. Berikut ini's apa yang saya digunakan untuk lembut scroll layar ke bawah pesan terakhir saya di aplikasi chat:
$("#html, body").stop().animate({
scrollTop: $("#last-message").offset().top
}, 2000);
Saya harap ini membantu orang lain.