Cuộn xuống dưới cùng của div?

Tôi đang tạo một cuộc trò chuyện bằng cách sử dụng các yêu cầu ajax trong đường ray và tôi đang cố gắng để một div di chuyển xuống phía dưới mà không gặp nhiều may mắn.

Tôi đang gói mọi thứ trong div này:

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

Có cách nào để giữ cho nó được cuộn xuống phía dưới theo mặc định bằng cách sử dụng JS không?

Có cách nào để giữ cho nó cuộn xuống phía dưới sau khi yêu cầu ajax không?

Đây là những gì tôi sử dụng trên trang web của mình:

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

Điều này dễ dàng hơn nhiều nếu bạn đang sử dụng jQuery scrollTop :

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

Bạn có thể sử dụng mã sau đây:

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

Để thực hiện cuộn trơn tru với JQuery:

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

Xem ví dụ trên JSFiddle

Đây là lý do tại sao điều này hoạt động:

Tham chiếu: scrollTop , scrollHeight , clientHeight

sử dụng jQuery animate :

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

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

Hoạt động từ jQuery 1.6

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

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

Phương pháp mới hơn hoạt động trên tất cả các trình duyệt hiện tại :

this.scrollIntoView(false);

cuộn trơn tru với Javascript:

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

Nếu bạn không muốn dựa vào scrollHeight, đoạn mã sau sẽ giúp:

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

Sử dụng jQuery, scrollTop được sử dụng để đặt vị trí dọc của scollbar cho bất kỳ phần tử nào. Ngoài ra còn có một plugin cuộn jquery đẹp được sử dụng để cuộn với hình động và các tùy chọn khác nhau ( bản demo )

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

nếu bạn muốn sử dụng phương thức hoạt hình của jQuery để thêm hình ảnh động trong khi cuộn xuống, hãy kiểm tra đoạn mã sau:

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

Tôi đã gặp phải vấn đề tương tự, nhưng với một ràng buộc bổ sung: Tôi không kiểm soát được mã đã gắn các phần tử mới vào thùng chứa cuộn. Không có ví dụ nào tôi tìm thấy ở đây cho phép tôi làm điều đó. Đây là giải pháp tôi đã kết thúc.

Nó sử dụng Mutation Observers( https://developer.mozilla.org/en-US/docs/Web/API/MutingObserver ) khiến nó chỉ có thể sử dụng được trên các trình duyệt hiện đại (mặc dù tồn tại polyfill)

Vì vậy, về cơ bản mã làm điều đó:

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

Tôi đã thực hiện một câu đố để thể hiện khái niệm: https://jsfiddle.net/j17r4bnk/

Javascript hoặc jquery:

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

Css:

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

Tìm thấy điều này thực sự hữu ích, cảm ơn bạn.

Đối với những người Angular 1.X ngoài kia:

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;

  }
]);

Chỉ vì việc gói các phần tử jQuery so với các phần tử DOM DOM có một chút khó hiểu với góc cạnh.

Ngoài ra, đối với một ứng dụng trò chuyện, tôi thấy việc thực hiện nhiệm vụ này sau khi các cuộc trò chuyện của bạn được tải là hữu ích, bạn cũng có thể cần phải tát vào thời gian chờ ngắn.

phụ lục nhỏ: chỉ cuộn, nếu dòng cuối cùng đã hiển thị. nếu cuộn một chút, hãy để lại nội dung (chú ý: không được kiểm tra với các kích thước phông chữ khác nhau. Điều này có thể cần một số điều chỉnh bên trong "> = so sánh"):

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;

Cũng như một đoạn thưởng. Tôi đang sử dụng góc cạnh và đang cố cuộn một chuỗi tin nhắn xuống phía dưới khi người dùng chọn các cuộc hội thoại khác nhau với người dùng. Để đảm bảo rằng cuộn hoạt động sau khi dữ liệu mới đã được tải vào div với ng-repeat cho các tin nhắn, chỉ cần bọc đoạn mã cuộn trong thời gian chờ.

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

Điều đó sẽ đảm bảo rằng sự kiện cuộn được kích hoạt sau khi dữ liệu được chèn vào DOM.

Bạn cũng có thể, bằng cách sử dụng jQuery, đính kèm một hình ảnh động vào html,bodytài liệu thông qua:

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

Điều này sẽ dẫn đến một cuộn trơn tru lên đầu div với id "div-id".

Tập lệnh Java:

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

Cuộn đến dòng cuối cùng của nội dung hiện tại.

Điều này sẽ cho phép bạn cuộn xuống hết cỡ liên quan đến chiều cao tài liệu

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

Một phương pháp rất đơn giản để làm điều này là đặt scroll tochiều cao của div.

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

Cuộn đến phần tử cuối cùng bên trong div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Trên ứng dụng Angular 6 của tôi, tôi đã làm điều này:

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

Hàm ClearInterval (distance) sẽ dừng bộ hẹn giờ để cho phép cuộn trên / dưới bằng tay.

Kịch bản của tôi: Tôi đã có một danh sách các chuỗi, trong đó tôi phải nối thêm một chuỗi do người dùng cung cấp và tự động cuộn đến cuối danh sách. Tôi đã cố định chiều cao của màn hình hiển thị danh sách, sau đó nó sẽ tràn ra.

Tôi đã thử câu trả lời của @Jeremy Ruten, nó đã hoạt động, nhưng nó đang cuộn đến phần tử thứ (n-1). Nếu bất cứ ai đang phải đối mặt với loại vấn đề này, bạn có thể sử dụng setTimeOut()phương pháp giải quyết. Bạn cần sửa đổi mã dưới đây:

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

Đây là liên kết StcakBlitz mà tôi đã tạo cho thấy vấn đề và giải pháp của nó: https://stackblitz.com/edit/angular-ivy-x9esw8

Tôi biết đây là một câu hỏi cũ, nhưng không có giải pháp nào trong số này giải quyết được cho tôi. Tôi đã kết thúc bằng cách sử dụng offset (). Top để có kết quả mong muốn. Đây là những gì tôi đã sử dụng để nhẹ nhàng cuộn màn hình xuống tin nhắn cuối cùng trong ứng dụng trò chuyện của mình:

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

Tôi mong điều này giúp được người nào khác.

Đôi khi, đơn giản nhất là giải pháp tốt nhất: Tôi không biết điều này có giúp ích gì không, nó giúp tôi cuộn nó bao giờ tôi cũng muốn. "Y =" càng cao, nó càng cuộn xuống và tất nhiên "0" có nghĩa là trên cùng, vì vậy, ví dụ "1000" có thể ở dưới cùng, hoặc "2000" hoặc "3000", v.v., tùy thuộc vào thời gian của bạn trang là. Điều này thường hoạt động trong một nút với onclick hoặc onmouseover.

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

Đặt khoảng cách từ đỉnh của phần tử có thể cuộn là tổng chiều cao của phần tử.

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

Bạn có thể sử dụng Phương thức HTML DOM scrollIntoView như thế này:

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

sử dụng :

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

hoặc kiểm tra cuộn xuống dưới cùng:

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

Nếu điều này đang được thực hiện để cuộn xuống dưới cùng của cửa sổ trò chuyện, hãy làm như sau

Ý tưởng cuộn đến một div cụ thể trong cuộc trò chuyện là như sau

1) Mỗi ​​div trò chuyện bao gồm Người, thời gian và tin nhắn được chạy trong một vòng lặp for với lớp chatContentbox

2) querySelectorAll tìm thấy tất cả các mảng như vậy. Nó có thể là 400 nút (400 cuộc trò chuyện)

3) đi đến cái cuối cùng

4) scrollIntoView ()

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