Scroll naar de onderkant van div?

Ik ben een chat aan het maken met behulp van Ajax-verzoeken en ik probeer zonder veel geluk berichten div naar beneden te laten scrollen.

Ik pak alles in deze div:

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

Is er een manier om het standaard naar beneden te laten scrollen met JS?

Is er een manier om het naar beneden te laten scrollen na een ajax-verzoek?

Antwoord 1, autoriteit 100%

Dit is wat ik op mijn site gebruik:

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

Antwoord 2, autoriteit 24%

Dit is veel gemakkelijker als u jQuery scrollTopgebruikt:

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

Antwoord 3, autoriteit 9%

Je kunt de onderstaande code proberen:

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

Een vloeiendescroll uitvoeren met JQuery:

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

Bekijk het voorbeeldop JSFiddle

Dit is waarom dit werkt:

Ref: scrollTop, scrollHeight, clientHeight

Antwoord 4, autoriteit 6%

met behulp van jQuery animeren:

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

Antwoord 5, autoriteit 3%

Nieuwere methode die werkt op alle huidige browsers:

this.scrollIntoView(false);

Antwoord 6, autoriteit 2%

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

Werkt vanuit jQuery 1.6

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

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

Antwoord 7, autoriteit 2%

soepelscrollen met Javascript:

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

Antwoord 8

Als u niet op scrollHeightwilt vertrouwen, helpt de volgende code:

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

Antwoord 9

Java-script:

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

Scrollt naar de laatste regel van de aanwezige inhoud.

Antwoord 10

Javascript of jQuery:

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

CSS:

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

Antwoord 11

U kunt de HTML DOM scrollIntoView-methode als volgt gebruiken:

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

Antwoord 12

Mijn scenario: ik had een lijst met tekenreeksen, waarin ik een door een gebruiker opgegeven tekenreeks moest toevoegen en automatisch naar het einde van de lijst moest scrollen. Ik had een vaste hoogte van de weergave van de lijst, waarna deze zou moeten overlopen.

Ik heb het antwoord van @Jeremy Ruten geprobeerd, het werkte, maar het scrolde naar het (n-1)de element. Als iemand met dit soort problemen wordt geconfronteerd, kunt u de methode setTimeOut()als tijdelijke oplossing gebruiken. U moet de onderstaande code aanpassen:

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

Hier is de StcakBlitz-link die ik heb gemaakt en die het probleem en de oplossing laat zien: https:// stackblitz.com/edit/angular-ivy-x9esw8

Antwoord 13

Met jQuery wordt scrollTopgebruikt om de verticale positie van de scollbar voor een bepaald element in te stellen. er is ook een mooie jquery scrollTo plugindie wordt gebruikt om te scrollen met animatie en verschillende opties (demo’s)

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

als je de animatiemethode van jQuerywilt gebruiken om animatie toe te voegen terwijl je naar beneden scrolt, controleer dan het volgende fragment :

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

Antwoord 14

Ik ben hetzelfde probleem tegengekomen, maar met een extra beperking: ik had geen controle over de code die nieuwe elementen aan de schuifcontainer toevoegde. Geen van de voorbeelden die ik hier vond, stond me toe dat te doen. Hier is de oplossing waarmee ik eindigde.

Het gebruikt Mutation Observers(https: //developer.mozilla.org/en-US/docs/Web/API/MutationObserver) waardoor het alleen bruikbaar is in moderne browsers (hoewel polyfills bestaan)

Dus eigenlijk doet de code precies dat:

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

Ik heb een viool gemaakt om het concept te demonstreren:
https://jsfiddle.net/j17r4bnk/

Antwoord 15

Ik vond dit erg nuttig, bedankt.

Voor de Angular 1.X-mensen die er zijn:

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

Alleen omdat de verpakking in jQuery-elementen versus HTML DOM-elementen een beetje verwarrend wordt met hoekig.

Ook voor een chattoepassing vond ik het nuttig om deze opdracht te maken nadat je chats waren geladen, je moet misschien ook een korte time-out gebruiken.

Antwoord 16

klein addendum: scrollt alleen als de laatste regel al zichtbaar is. als er een klein beetje wordt gescrolld, blijft de inhoud staan waar deze is (let op: niet getest met verschillende lettergroottes. Dit heeft mogelijk enkele aanpassingen nodig binnen “>= vergelijking”):

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;

Antwoord 17

Net als een bonusfragment. Ik gebruik hoekig en probeerde een berichtenreeks naar beneden te scrollen toen een gebruiker verschillende gesprekken met gebruikers selecteerde. Om er zeker van te zijn dat het scrollen werkt nadat de nieuwe gegevens in de div zijn geladen met de ng-repeat for messages, kun je het scrollfragment gewoon in een time-out plaatsen.

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

Dat zorgt ervoor dat de scroll-gebeurtenis wordt geactiveerd nadat de gegevens in de DOM zijn ingevoegd.

Antwoord 18

Hiermee kunt u helemaal naar beneden scrollen met betrekking tot de documenthoogte

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

Antwoord 19

Je kunt met jQuery ook een animatie toevoegen aan html,bodyvan het document via:

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

wat resulteert in een vloeiende scroll naar de bovenkant van de div met id “div-id”.

Antwoord 20

alternatieve oplossing

function scrollToBottom(element) {
  element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}

Antwoord 21

Een zeer eenvoudige methode hiervoor is om de scroll toin te stellen op de hoogte van de div.

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

Antwoord 22

Scroll naar het laatste element in de div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Antwoord 23

Op mijn Angular 6-applicatie heb ik zojuist dit gedaan:

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

De functie clearInterval(interval) stopt de timer om handmatig naar boven/beneden te kunnen scrollen.

Antwoord 24

Net als jij ben ik een chat-app aan het bouwen en wil ik dat het meest recente bericht in beeld komt. Dit werkte uiteindelijk goed voor mij:

//get the div that contains all the messages
let div = document.getElementById('message-container');
//make the last element (a message) to scroll into view, smoothly!
div.lastElementChild.scrollIntoView({ behavior: 'smooth' });

Antwoord 25

Ik weet dat dit een oude vraag is, maar geen van deze oplossingen werkte voor mij. Ik heb uiteindelijk offset().top gebruikt om de gewenste resultaten te krijgen. Dit is wat ik gebruikte om voorzichtig het scherm omlaag te scrollennaar het laatste bericht in mijn chattoepassing:

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

Ik hoop dat dit iemand anders helpt.

Antwoord 26

Ik gebruik het verschil tussen de Y-coördinaat van de eerste item-div en de Y-coördinaat van de geselecteerde item-div. Hier is de JavaScript/JQuery-code en de html:

function scrollTo(event){
        // In my proof of concept, I had a few <button>s with value 
        // attributes containing strings with id selector expressions
        // like "#item1".
        let selectItem = $($(event.target).attr('value'));
        let selectedDivTop = selectItem.offset().top;
        let scrollingDiv = selectItem.parent();
        let firstItem = scrollingDiv.children('div').first();
        let firstItemTop = firstItem.offset().top;
        let newScrollValue = selectedDivTop - firstItemTop;
        scrollingDiv.scrollTop(newScrollValue);
    }

<div id="scrolling" style="height: 2rem; overflow-y: scroll">
  <div id="item1">One</div>
  <div id="item2">Two</div>
  <div id="item3">Three</div>
  <div id="item4">Four</div>
  <div id="item5">Five</div>
</div>

function scrollToBottom() {
    const scrollContainer = document.getElementById('container');
    scrollContainer.scrollTo({
        top: scrollContainer.scrollHeight,
        left: 0,
        behavior: 'smooth'
    });
}
// initialize dummy content
const scrollContainer = document.getElementById('container');
const numCards = 100;
let contentInnerHtml = '';
for (let i=0; i<numCards; i++) {
  contentInnerHtml += `<div class="card mb-2"><div class="card-body">Card ${i + 1}</div></div>`;
}
scrollContainer.innerHTML = contentInnerHtml;

.overflow-y-scroll {
  overflow-y: scroll;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column vh-100">
  <div id="container" class="overflow-y-scroll flex-grow-1"></div>
  <div>
    <button class="btn btn-primary" onclick="scrollToBottom()">Scroll to bottom</button>
  </div>
</div>

.scroll-container {
  overflow-anchor: none;
}

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

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