Div en altına kaydırılsın mı?

Raylarda ajax isteklerini kullanarak bir sohbet oluşturuyorum ve çok şans olmadan altına kaydırmak için bir div almaya çalışıyorum.

Bu div her şeyi sarma:

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

JS kullanarak varsayılan olarak en alta kaydırmanın bir yolu var mı?

Bir ajax isteğinden sonra onu aşağıya kaydırmanın bir yolu var mı?

Sitemde kullandığım bilgiler:

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

JQuery scrollTop kullanıyorsanız bu çok daha kolaydır :

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

Aşağıdaki kodu kullanabilirsiniz:

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

JQuery ile yumuşak bir kaydırma yapmak için :

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

Üzerindeki örneğe bakın JSFiddle

Bunun neden işe yaradığı aşağıda açıklanmıştır:

Ref: scrollTop , scrollHeight , clientHeight

jQuery animate kullanarak :

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

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

JQuery 1.6'dan Çalışmalar

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

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

Mevcut tüm tarayıcılarda çalışan daha yeni bir yöntem :

this.scrollIntoView(false);

Javascript ile yumuşak kaydırma:

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

Güvenmek istemiyorsanız scrollHeight, aşağıdaki kod yardımcı olur:

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

JQuery kullanarak, scrollTop herhangi bir öğe için kaydırma çubuğunun dikey konumunu ayarlamak için kullanılır. güzel de vardır jQuery scrollTo eklentisi animasyon ve farklı seçeneklerle kaydırma için kullanılan ( demos )

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

aşağı kaydırırken animasyon eklemek için jQuery'nin animate yöntemini kullanmak istiyorsanız , aşağıdaki snippet'i kontrol edin:

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

Aynı sorunla karşılaştım, ancak ek bir kısıtlamayla: Kaydırma kabına yeni öğeler ekleyen kod üzerinde hiçbir denetimim yoktu. Burada bulduğum örneklerin hiçbiri tam da bunu yapmama izin vermedi. İşte sonuçta bulduğum çözüm.

Yalnızca modern tarayıcılarda kullanılabilir olmasını sağlayan (çoklu dolgular mevcut olsa da) Mutation Observers( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) kullanır ( çoklu dolgular mevcut olsa da)

Temelde kod sadece bunu yapar:

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

Kavramı göstermek için bir keman yaptım: https://jsfiddle.net/j17r4bnk/

Javascript veya jquery:

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

css:

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

Bunu gerçekten yararlı buldum, teşekkürler.

Orada Açısal 1.X millet için:

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;

  }
]);

HTML DOM öğelerine karşı jQuery öğelerinin kaydırılmasının açısal ile biraz kafa karıştırıcı olması.

Ayrıca bir sohbet uygulaması için, sohbetlerinizin faydalı olması için yüklendikten sonra bu atamayı yaptığımı buldum, kısa zaman aşımına da tokat atmanız gerekebilir.

küçük ek: yalnızca son satır görünürse kayar. küçük bir parça kaydırılırsa içeriği olduğu yerde bırakır (dikkat: farklı yazı tipi boyutlarıyla test edilmez. "> = karşılaştırma" içinde bazı ayarlamalar yapılması gerekebilir):

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;

Tıpkı bonus pasajı gibi. Açısal kullanıyorum ve bir kullanıcı kullanıcılarla farklı konuşmalar seçtiğinde bir mesaj dizisini aşağı kaydırmaya çalışıyordum. Yeni verilerin iletiler için ng yinelemesiyle div'a yüklendikten sonra kaydırmanın çalıştığından emin olmak için kaydırma snippet'ini zaman aşımı ile sarmanız yeterlidir.

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

Bu, veriler DOM'a eklendikten sonra scroll olayının tetiklenmesini sağlar.

Ayrıca, jQuery kullanarak aşağıdakiler html,bodyyoluyla belgeye bir animasyon ekleyebilirsiniz :

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

"div-id" kimliğiyle div'in üstüne yumuşak bir kaydırma sağlar.

Java Komut Dosyası:

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

Mevcut içeriğin son satırına kaydırır.

Bu, belge yüksekliğine göre tamamen aşağı kaydırmanıza olanak tanır

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

Bunun için çok basit bir yöntem scroll todiv'in yüksekliğine ayarlamaktır .

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

Div içindeki son öğeye gidin:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Açısal 6 uygulamamda bunu yaptım:

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

ClearInterval (aralık) işlevi, manuel yukarı / aşağı kaydırmaya izin vermek için zamanlayıcıyı durduracaktır.

Senaryom: Bir kullanıcı tarafından verilen bir dize eklemek ve otomatik olarak listenin sonuna kaydırmak zorunda dize bir listesi vardı. Liste ekranının sabit yüksekliği vardı, bundan sonra taşması gerekiyor.

Jeremy Ruten'in cevabını denedim, işe yaradı, ancak (n-1). Elemente ilerliyordu. Herhangi biri bu tür bir sorunla karşı karşıyaysa, setTimeOut()yöntem geçici çözümünü kullanabilirsiniz . Kodu aşağıdaki şekilde değiştirmeniz gerekir:

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

Sorunu ve çözümünü gösteren oluşturduğum StcakBlitz bağlantısı: https://stackblitz.com/edit/angular-ivy-x9esw8

Bunun eski bir soru olduğunu biliyorum, ama bu çözümlerin hiçbiri benim için işe yaramadı. İstenen sonuçları almak için offset (). Ekranı , sohbet uygulamamdaki son iletiye yavaşça kaydırmak için kullandığım şey :

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

Umarım bunun bir başkasına yardımı olur.

Bazen en basit en iyi çözümdür: Bunun yardımcı olup olmayacağını bilmiyorum, istediğim gibi kaydırmamda bana yardımcı oldu. "Y =" ne kadar yüksekse, o kadar aşağı kayar ve elbette "0" en üst demektir, bu nedenle örneğin "1000" alt olabilir veya "2000" veya "3000" vb. sayfası. Bu genellikle onclick veya overmouseover ile bir düğme içinde çalışır.

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

Kaydırılabilir öğenin üstünden mesafeyi, öğenin toplam yüksekliği olarak ayarlayın.

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

HTML DOM scrollIntoView Yöntemini şu şekilde kullanabilirsiniz:

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

kullanın:

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

veya aşağı kaydırmayı işaretleyin:

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

Bu, sohbet penceresinin altına kaydırmak için yapılıyorsa, aşağıdakileri yapın

Sohbette belirli bir div'e kaydırma fikri şuydu:

1) Kişi, zaman ve mesajdan oluşan her sohbet div, sınıf chat ile bir for döngüsü içinde çalıştırılır.

2) querySelectorAll tüm bu dizileri bulur. 400 düğüm olabilir (400 sohbet)

3) sonuncusuna git

4) scrollIntoView ()

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