使用javascript自动滚动到范围的底部

Question

I have a span defined, to which I am occasionally adding text and I am trying to get it to scroll to the bottom of the "box" but without success.

I have the span defined as:

    <tr>
    <td style="height:130px; border: 1px solid black;">
    <div class="scrollable">
    <span id="infoWindow"></span>
    </div>
    </td>
    </tr>

With

div.scrollable 
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

And I am adding to it as follows:

document.getElementById("infoWindow").innerHTML+="Just some blurb<hr>";



    var objDiv = document.getElementById("infoWindow");

I have tried two different approaches:

    objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;

and

    objDiv.scrollTop = objDiv.scrollHeight; 

But neither work. What am I doing wrong? Many thanks!

Answer 1

refer this https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

scrolling is applicable only to scrollable elements

 var i= 0; while(i<10){ document.getElementById("infoWindow").innerHTML+="Just some blurb<hr>"; i++; } //get the total height of your element var bottomPosition = document.getElementById("infoWindow").offsetHeight; //set scroll of container element document.querySelector(".scrollable").scrollTop = bottomPosition; 

 div.scrollable { width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto; } /* height is no defined for inline-elements so make span inline-block or block*/ #infoWindow{ display:inline-block; } 

 <table> <tr> <td style="height:130px; border: 1px solid black;"> <div class="scrollable"> <!-- added style for span element --> <span id="infoWindow"></span> </div> </td> </tr> </table> 

Answer 2

scrollHeight and clientHeight are properties which are calculated when DOM has been fully painted. You should subscribe to event DOMContentLoaded to be sure the calculations are done.

There is a function scrollIntoView which you can use on any element which does exactly the name suggests. MDN - scrollIntoView . You can also define some options for scrolling like smoothness and position where to scroll exactly on element.

Here is an example I wrote to test this.

Keep in mind that scrollIntoView triggered by code example will impact SO scroll behavior.

 const paragraphs = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliter enim nosmet ipsos nosse non possumus. Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Quis autem de ipso sapiente aliter existimat, quin, etiam cum decreverit esse moriendum, tamen discessu a suis atque ipsa relinquenda luce moveatur? Duo Reges: constructio interrete. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Id quaeris, inquam, in quo, utrum respondero, verses te huc atque illuc necesse est.', 'Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Hanc in motu voluptatem -sic enim has suaves et quasi dulces voluptates appellat-interdum ita extenuat, ut M. Hunc ipsum Zenonis aiunt esse finem declarantem illud, quod a te dictum est, convenienter naturae vivere. Suo enim quisque studio maxime ducitur. Manebit ergo amicitia tam diu, quam diu sequetur utilitas, et, si utilitas amicitiam constituet, tollet eadem.', 'Partim cursu et peragratione laetantur, congregatione aliae coetum quodam modo civitatis imitantur; Hic nihil fuit, quod quaereremus. Stoici restant, ei quidem non unam aliquam aut alteram rem a nobis, sed totam ad se nostram philosophiam transtulerunt; Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Tibi hoc incredibile, quod beatissimum. Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Ne vitationem quidem doloris ipsam per se quisquam in rebus expetendis putavit, nisi etiam evitare posset.' ]; const container = document.getElementById('infoWindow'); const paragraphElements = paragraphs.map((paragraphText, index) => { const newParagraph = document.createElement('p'); newParagraph.innerHTML = paragraphText; newParagraph.style.animationDelay = `${.8 * index + 1}s`; return newParagraph; }); const demostrateScrolling = () => { const scroller = document.getElementById('scroller'); const scrollerOptions = { behavior: 'smooth', block: "start", inline: "nearest" }; scroller.addEventListener('click', () => { container.querySelector('p:last-child').scrollIntoView(scrollerOptions); }); paragraphElements.map(p => { container.appendChild(p); }); } document.addEventListener('DOMContentLoaded', demostrateScrolling); 

 body { font-family: 'Tahoma'; } #infoWindow { height: 200px; overflow-y: auto; margin: 10px; } #infoWindow p { padding: 10px; margin: 10px; background-color: navy; color: white; border-radius: 5px; animation-name: FadeIn; animation-duration: .4s; animation-fill-mode: backwards; } @keyframes FadeIn { from { opacity: 0; } to { opacity: 1; } } #scroller { width: auto; background-color: lightblue; border-radius: 24px; padding: 5px; margin: 5px; font-size: 10px; cursor: pointer; } 

 <h2>Scroll To Bottom</h2> <div id="infoWindow"></div> <span id="scroller">Scroll to bottom</span>