Keep overflow div scrolled to bottom unless user scrolls up

Question

I have a div that is only 300 pixels big and I want it to when the page loads scroll to the bottom of the content  This div has content dynamically added to it and needs to stay scrolled all the way down  Now if the user decides to scroll up I don t want it to jump back to the bottom until the user scrolls all the way down again  Is it possible to have a div that will stay scrolled to the bottom unless the user scrolls up and when the user scrolls back to the bottom it needs to keep itself at the bottom even when new dynamic content is added  How would I go bout creating this

User · Answer

I managed to get this working  The trick is to calculate   a  current div user scroll position and  b  div scroll height  both BEFORE appending the new element  If a     b  we know the user is at the bottom before appending the new element      let div   document querySelector  div scrollableBox         let span   document createElement  span        span textContent    Hello        let divCurrentUserScrollPosition   div scrollTop   div offsetHeight      let divScrollHeight   div scrollHeight          We have the current scroll positions saved in        variables  so now we can append the new element      div append span             if   divScrollHeight     divCurrentUserScrollPosition                Scroll to bottom of div         div scrollTo   left  0  top  div scrollHeight

User · Answer

The following does what you need  I did my best  with loads of google searches along the way    lt html gt   lt head gt     lt script gt         no jquery  or other craziness  just        straight up vanilla javascript functions        to scroll a div s content to the bottom        if the user has not scrolled up   Includes        a clickable  quot alert quot  for when  quot content quot  is        changed          this should work for any kind of content        be it images  or links  or plain text        simply  quot append quot  the new element to the        div  and this will handle the rest as        proscribed       let scrolled   false     at bottom      let scrolling   false     scrolling in next msg      let listener   false     does element have content changed listener      let contentChanged   false     kind of obvious     let alerted   false     less obvious      function innerHTMLChanged              this is here in case we want to          customize what goes on in here           for now  just        contentChanged   true             function scrollToBottom id          if   id    id    quot scrollable element quot           let DEBUG   0     change to 1 and open console       let dstr    quot  quot          let e   document getElementById id         if  e            if   listener              dstr     quot content changed listener not active n quot             e addEventListener  quot DOMSubtreeModified quot   innerHTMLChanged             listener   true            else             dstr     quot content changed listener active n quot                     let height    e scrollHeight - e offsetHeight      this isn t perfect         let offset    e offsetHeight - e clientHeight      and does this fix it  seems to            let scrollMax   height   offset           dstr     quot offsetHeight   quot    e offsetHeight    quot  n quot           dstr     quot clientHeight   quot    e clientHeight    quot  n quot           dstr     quot scrollHeight   quot    e scrollHeight    quot  n quot           dstr     quot scrollTop   quot    e scrollTop    quot  n quot           dstr     quot scrollMax   quot    scrollMax    quot  n quot           dstr     quot offset   quot    offset    quot  n quot           dstr     quot height   quot    height    quot  n quot           dstr     quot contentChanged   quot    contentChanged    quot  n quot            if   scrolled  amp  amp   scrolling              dstr     quot user has not scrolled n quot             if  e scrollTop    scrollMax                dstr     quot scroll not at bottom n quot               e scroll                 top  scrollMax                left  0                behavior   quot auto quot                             e scrollTop   scrollMax              scrolling   true              else               if  alerted                  dstr     quot alert exists n quot                 else                 dstr     quot alert does not exist n quot                             if  contentChanged    contentChanged   false                          else             dstr     quot user scrolled away from bottom n quot             if   scrolling                dstr     quot not auto-scrolling n quot                if  e scrollTop  gt   scrollMax                  dstr     quot scroll at bottom n quot                 scrolled   false                 if  alerted                    dstr     quot alert exists n quot                   let n   document getElementById  quot alert quot                    n remove                    alerted   false                  contentChanged   false                  scrolled   false                                else                 dstr     quot scroll not at bottom n quot                 if  contentChanged                    dstr     quot content changed n quot                   if   alerted                      dstr     quot alert not displaying n quot                     let n   document createElement  quot div quot                      e append n                     n id    quot alert quot                     n style position    quot absolute quot                     n classList add  quot normal-panel quot                      n classList add  quot clickable quot                      n classList add  quot blink quot                      n innerHTML    quot new content  quot                      let nposy   parseFloat getComputedStyle e  height    18                    let nposx   18    parseFloat getComputedStyle e  width    2  -  parseFloat getComputedStyle n  width    2                     dstr     quot nposx   quot    nposx    quot  n quot                     dstr     quot nposy   quot    nposy    quot  n quot                     n style left   nposx                    n style top   nposy                     n addEventListener  quot click quot        gt                        dstr     quot clearing alert n quot                       scrolled   false                      alerted   false                      contentChanged   false                      n remove                                             alerted   true                    else                     dstr     quot alert already displayed n quot                                     else                   alerted   false                                            else               dstr     quot auto-scrolling n quot               if  e scrollTop  gt   scrollMax                  dstr     quot done scrolling quot                 scrolling   false                scrolled   false                else                 dstr     quot still scrolling    n quot                                                      if  DEBUG  amp  amp  dstr  console log  quot stb  n quot    dstr          setTimeout      gt    scrollToBottom id      50              function scrollMessages id          if   id    id    quot scrollable element quot           let DEBUG   1        let dstr    quot  quot          if  scrolled            dstr     quot already scrolled quot           else           dstr     quot got scrolled quot           scrolled   true                dstr     quot  n quot          if  contentChanged  amp  amp  alerted            dstr     quot content changed  and alerted n quot           let n   document getElementById  quot alert quot            if  n              dstr     quot alert div exists n quot             let e   document getElementById id             let nposy   parseFloat getComputedStyle e  height    18            dstr     quot nposy   quot    nposy    quot  n quot             n style top   nposy            else             dstr     quot alert div does not exist  n quot                     else           dstr     quot content NOT changed  and not alerted quot                  if  DEBUG  amp  amp  dstr  console log  quot sm   quot    dstr              setTimeout      gt    scrollToBottom  quot messages quot       1000                                     HELPER FUNCTION          simulates adding dynamic content to  quot chat quot  div     let count   0      function addContent           let e   document getElementById  quot messages quot          if  e            let br   document createElement  quot br quot            e append  quot test  quot    count           e append br           count                     lt  script gt      lt style gt      button         border-radius  5px              container         padding  5px              messages         background-color  blue        border  1px inset black        border-radius  3px        color  white        padding  5px        overflow-x  none        overflow-y  auto        max-height  100px        width  100px        margin-bottom  5px        text-align  left              bordered         border  1px solid black        border-radius  5px              inline-block         display  inline-block              centered         text-align  center              normal-panel         background-color   888888        border  1px solid black        border-radius  5px        padding  2px              clickable         cursor  pointer           lt  style gt   lt  head gt   lt body gt   lt div id  quot container quot  class  quot bordered inline-block centered quot  gt     lt div class  quot inline-block quot  gt My Chat lt  div gt      lt div id  quot messages quot  onscroll  quot scrollMessages  messages   quot  gt      test lt br gt      test lt br gt      test lt br gt      test lt br gt      test lt br gt      test lt br gt      test lt br gt      test lt br gt      test lt br gt      test lt br gt     lt  div gt      lt button onclick  quot addContent    quot  gt Add Content lt  button gt   lt  div gt   lt  body gt   lt  html gt   Note  You may have to adjust the alert position  nposx and nposy  in both scrollToBottom and scrollMessages to match your needs    And a link to my own working example  hosted on my server  https   night-stand ca jaretts tests chat scroll html

User · Answer

yourDivID   animate   scrollTop    document  height       slow    return false    This will calculate the ScrollTop Position from the height of  yourDivID using the   document  height   property so that even if dynamic contents are added to the div the scroller will always be at the bottom position  Hope this helps  But it also has a small bug even if we scroll up and leaves the mouse pointer from the scroller it will automatically come to the bottom position  If somebody could correct that also it will be nice

User · Answer

I couldn t get the top two answers to work  and none of the other answers were helpful to me  So I paid three people  30 from Reddit r forhire and Upwork and got some really good answers  This answer should save you  90    Justin Hundley   The Site Bros  solution HTML  lt div id  quot chatscreen quot  gt     lt div id  quot inner quot  gt        lt  div gt   lt  div gt   CSS  chatscreen     width  300px    overflow-y  scroll    max-height 100px     Javascript   function        var scrolled   false    var lastScroll   0    var count   0         quot  chatscreen quot   on  quot scroll quot   function         var nextScroll     this  scrollTop         if  nextScroll  lt   lastScroll            scrolled   true            lastScroll   nextScroll           console log nextScroll     quot  inner quot   height        if   nextScroll   100        quot  inner quot   height              scrolled   false                  function updateScroll          if  scrolled             var element   document getElementById  quot chatscreen quot              var inner   document getElementById  quot inner quot              element scrollTop   inner scrollHeight                    Now let s load our messages   function load messages              quot  inner quot    append   quot Test quot    count    quot  lt br  gt  quot           count   count   1        updateScroll             setInterval load messages 300         Preview the site bros  solution portfolio   Lermex   Sviatoslav Chumakov s solution HTML  lt div id  quot chatscreen quot  gt    lt  div gt   CSS  chatscreen     height  300px    border  1px solid purple    overflow  scroll     Javascript   function    var isScrolledToBottom   false     Now let s load our messages function load messages            quot  chatscreen quot    append   quot  lt br gt Test quot         updateScr       var out   document getElementById  quot chatscreen quot    var c   0      quot  chatscreen quot   on  scroll   function            console log out scrollHeight       isScrolledToBottom   out scrollHeight - out clientHeight  lt   out scrollTop   10       function updateScr                allow 1px inaccuracy by adding 1       console log out scrollHeight - out clientHeight   out scrollTop   1       var newElement   document createElement  quot div quot         newElement innerHTML   c        out appendChild newElement            console log isScrolledToBottom           scroll to bottom if isScrolledToBotto     if isScrolledToBottom   out scrollTop   out scrollHeight - out clientHeight       var add   setInterval updateScr  1000    setInterval load messages 300      change to 300 to show the latest message you sent after pressing enter    comment this line and it works  uncomment and it fails                                    leaving it on 1000 shows the second to last message setInterval updateScroll 30        Preview Sviatoslav s solution portfolio   Igor Rusinov s Solution HTML  lt div id  quot chatscreen quot  gt  lt  div gt   CSS  chatscreen     height  100px    overflow  scroll    border  1px solid  000     Javascript   function        Now let s load our messages function load messages            quot  chatscreen quot    append   quot  lt br gt Test quot        var out   document getElementById  quot chatscreen quot    var c   0  var add   setInterval function            allow 1px inaccuracy by adding 1     var isScrolledToBottom   out scrollHeight - out clientHeight  lt   out scrollTop   1      load messages            scroll to bottom if isScrolledToBotto     if isScrolledToBottom   out scrollTop   out scrollHeight - out clientHeight       1000   setInterval updateScroll 30        Preview Igor s solution portfolio

User · Answer

In 2020  you can use css snap  but before Chrome 81 the layout change will not trigger re-snap  a pure css chat ui works on Chrome 81  also you can check Can I use CSS snap  This demo will snap the last element if visible  scroll to bottom to see the effect   x000D   x000D   container     overflow-y  scroll    overscroll-behavior-y  contain    scroll-snap-type  y proximity      container  gt  div  gt  div last-child     scroll-snap-align  end      container  gt  div  gt  div     background  lightgray    height  3rem    font-size  1 5rem     container  gt  div  gt  div nth-child 2n      background  gray    x000D   lt div class  container  style  height 6rem  gt   lt div gt   lt div gt 1 lt  div gt   lt div gt 2 lt  div gt   lt div gt 3 lt  div gt   lt div gt 4 lt  div gt   lt div gt 5 lt  div gt   lt  div gt   lt  div gt  x000D   x000D   x000D    EDIT use scroll-snap-type  y proximity   scroll up easier

User · Answer

div1   scrollTop     div1   0  scrollHeight    Or animated       div1   animate   scrollTop      div1   0  scrollHeight   1000

User · Answer

This might help you   var element   document getElementById  yourDivID    element scrollTop   element scrollHeight     EDIT   to match the comment     function updateScroll        var element   document getElementById  yourDivID        element scrollTop   element scrollHeight      whenever content is added  call the function updateScroll    or set a timer     once a second setInterval updateScroll 1000     if you want to update ONLY if the user didn t move   var scrolled   false  function updateScroll        if  scrolled           var element   document getElementById  yourDivID            element scrollTop   element scrollHeight               yourDivID   on  scroll   function        scrolled true

User · Answer

x000D   x000D   cont  x000D  height  100px  x000D  overflow-x  hidden  x000D  overflow-y  auto  x000D  transform  rotate 180deg   x000D  direction rtl  x000D  text-align left  x000D    x000D  ul  x000D  overflow  hidden  x000D  transform  rotate 180deg   x000D    x000D   lt div class  cont  gt   x000D    lt ul gt  x000D      lt li gt 0 lt  li gt  x000D      lt li gt 1 lt  li gt  x000D      lt li gt 2 lt  li gt  x000D      lt li gt 3 lt  li gt  x000D      lt li gt 4 lt  li gt  x000D      lt li gt 5 lt  li gt  x000D      lt li gt 6 lt  li gt  x000D      lt li gt 7 lt  li gt  x000D      lt li gt 8 lt  li gt  x000D      lt li gt 9 lt  li gt  x000D      lt li gt 10 lt  li gt    x000D    lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D     Run code snippet to see the effect   PS  If Run code snippet is not working  try this  https   jsfiddle net Yeshen xm2yLksu 3    How it work    Default overflow is scroll from top to bottom   transform  rotate 180deg  can make it scroll or load dynamic block from bottom to top     Original idea    https   blog csdn net yeshennet article details 88880252

User · Answer

Make sure message list is scrolled to the bottom var container       MessageWindowContent   0   var containerHeight   container clientHeight  var contentHeight   container scrollHeight   container scrollTop   contentHeight - containerHeight    Here is my version based on dotnetCarpenter s answer  My approach is a pure jQuery and I named the variables to make things a bit clearer   What is happening is if the content height is greater then the container we scroll the extra distance down to achieve the desired result    Works in IE and chrome

User · Answer

You can use something like this   var element   document getElementById  yourDivID    window scrollTo 0 element offsetHeight

User · Answer

I just implemented this and perhaps you can use my approach   Say we have the following HTML    lt div id  out  style  overflow auto  gt  lt  div gt    Then we can check if it scrolled to the bottom with   var out   document getElementById  out       allow 1px inaccuracy by adding 1 var isScrolledToBottom   out scrollHeight - out clientHeight  lt   out scrollTop   1    scrollHeight gives you the height of the element  including any non visible area due to overflow  clientHeight gives you the CSS height or said in another way  the actual height of the element  Both methods returns the height without margin  so you needn t worry about that  scrollTop gives you the position of the vertical scroll  0 is top and max is the scrollHeight of the element minus the element height itself  When using the scrollbar it can be difficult  it was in Chrome for me  to get the scrollbar all the way down to the bottom  so I threw in a 1px inaccuracy  So isScrolledToBottom will be true even if the scrollbar is 1px from the bottom  You can set this to whatever feels right to you   Then it s simply a matter of setting the scrollTop of the element to the bottom   if isScrolledToBottom      out scrollTop   out scrollHeight - out clientHeight    I have made a fiddle for you to show the concept  http   jsfiddle net dotnetCarpenter KpM5j   EDIT  Added code snippet to clarify when isScrolledToBottom is true   Stick scrollbar to bottom  x000D   x000D  const out   document getElementById  out   x000D  let c   0 x000D   x000D  setInterval function     x000D         allow 1px inaccuracy by adding 1 x000D      const isScrolledToBottom   out scrollHeight - out clientHeight  lt   out scrollTop   1 x000D   x000D      const newElement   document createElement  div   x000D   x000D      newElement textContent   format c     Bottom position    out scrollHeight - out clientHeight    Scroll position    out scrollTop  x000D   x000D      out appendChild newElement  x000D   x000D         scroll to bottom if isScrolledToBottom is true x000D      if  isScrolledToBottom    x000D        out scrollTop   out scrollHeight - out clientHeight x000D        x000D     500  x000D   x000D  function format      x000D    return Array prototype slice call arguments  join      x000D    x000D   out   x000D      height  100px  x000D    x000D   lt div id  out  style  overflow auto  gt  lt  div gt  x000D   lt p gt To be clear  We want the scrollbar to stick to the bottom if we have scrolled all the way down  If we scroll up  then we don t want the content to move  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Jim Hall s answer is preferrable because while it indeed does not scroll to the bottom when you re scrolled up  it is also pure CSS   Very much unfortunately however  this is not a stable solution  In chrome  possibly due to the 1-px-issue described by dotnetCarpenter above   scrollTop behaves inaccurately by 1 pixel  even without user interaction  upon element add   You can set scrollTop   scrollHeight - clientHeight  but that will keep the div in position when another element is added  aka the  keep itself at bottom  feature is not working anymore   So  in short  adding a small amount of Javascript  sigh  will fix this and fulfill all requirements   Something like https   codepen io anon pen pdrLEZ this  example by Coo   and after adding an element to the list  also the following   container       if container scrollHeight - container clientHeight - container scrollTop  lt   29        container scrollTop   container scrollHeight - container clientHeight      where 29 is the height of one line   So  when the user scrolls up half a line  if that is even possible    the Javascript will ignore it and scroll to the bottom  But I guess this is neglectible  And  it fixes the Chrome 1 px thingy

User · Answer

I was able to get this working with CSS only   The trick is to use display  flex  and flex-direction  column-reverse   The browser treats the bottom like its the top  Assuming the browsers you re targeting support flex-box  the only caveat is that the markup has to be in reverse order   Here is a working example  https   codepen io jimbol pen YVJzBg

User · Answer

Here s a solution based on a blog post by Ryan Hunt  It depends on the overflow-anchor CSS property  which pins the scrolling position to an element at the bottom of the scrolled content   x000D   x000D  function addMessage       const  message   document createElement  div       message className    message      message innerText    Random number     Math ceil Math random     1000        messages insertBefore  message   anchor         Trigger the scroll pinning when the scroller overflows   if   overflowing        overflowing   isOverflowing  scroller        scroller scrollTop    scroller scrollHeight         function isOverflowing  el      return  el scrollHeight  gt   el clientHeight     const  scroller   document querySelector   scroller    const  messages   document querySelector   messages    const  anchor   document querySelector   anchor    let overflowing   false   setInterval addMessage  1000   x000D   scroller     overflow  auto    height  90vh    max-height  11em    background   555      messages  gt        overflow-anchor  none      anchor     overflow-anchor  auto    height  1px      message     margin   3em    padding   5em    background   eee    x000D   lt section class  scroller  gt     lt div class  messages  gt       lt div class  anchor  gt  lt  div gt     lt  div gt   lt  section gt  x000D   x000D   x000D   Note that overflow-anchor doesn t currently work in Safari

User · Answer

yourDiv   scrollTop     yourDiv   0  scrollHeight     Live demo  http   jsfiddle net KGfG2

User · Answer

Here is how I approached it  My div height is 650px  I decided that if the scroll height is within 150px of the bottom then auto scroll it  Else  leave it for the user   if  container block scrollHeight - container block scrollTop  lt  800                        container block scrollTo 0  container block scrollHeight

[javascript] Keep overflow div scrolled to bottom unless user scrolls up

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to scroll